setAttribute, onclick, eventListener won't work

Question

So i have this code in javascript that replaces the text from the html, depending on the language you click on ( romanian or english, default is romanian). I tried all of the 3 ways i know for the click action, but none of them work. Can you please help me?

EDIT:
The first couple of instructions don't work at all ( nothing happens, not even when clicking on them). Then, the last bouth couples execute at the onload (but don't work after, when click on them). I see that using addEventListener with the listener function doesn't work with other parameters than just the event itself, but I'm still confused about the other ways

<html lang = "en">
<head>
    <title>
        Website
    </title>
    <meta charset = "UTF-8">
</head>

    <body>

        <a id='english' >English</a>
        <a id='romanian'>Romanian</a>
        <p id="paragraph">
            Bine ai venit pe site-ul meu!
        </p>

        <script>
            localStorage.setItem("languageStored" , "romanian");

            var language = {
                eng: {
                    welcome: "Welcome to my website!"
                },
                ro: {
                    welcome: "Bine ai venit pe site-ul meu!"
                }
            };

            window.onload = function() 
        {
            let optEngl = document.getElementById('english');
            let optRo = document.getElementById('romanian');

         //   optRo.setAttribute('click' ,'languageChange(this , optRo)' );
        //    optEngl.setAttribute('click','languageChange(this , optEngl)');


    //      optEngl.onclick = languageChange(this , optEngl);
    //      optRo.onclick = languageChange(this , optRo);

      //    optEngl.addEventListener("click" , languageChange(this , optEngl));
      //    optRo.addEventListener("click" , languageChange(this , optRo));

        }

        function languageChange(e , obj)
        {
            let languageStored = localStorage.getItem("languageStored");
            if(languageStored != obj.id)
            {
                console.log(obj.id);
                languageStored = obj.id;
                localStorage.setItem("languageStored" , languageStored);

                if(languageStored == "english")
                 document.getElementById('paragraph').textContent = language.eng.welcome;
                else 
                 document.getElementById('paragraph').textContent = language.ro.welcome;
            }
        }    
        </script>
    </body>
</html> ```

_"...but none of them work"_ - That "error description" is meaningless. What happens? What should happen instead? Any errors in the console? If yes, post the exact error message. And what have you already tried to solve or debug this problem? — Andreas, Jan 05 '20 at 17:12
Did you check any documentation on the methods? Like [this one](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) for `.addEventListener()`? Compare the examples with your code. — Andreas, Jan 05 '20 at 17:13
The first couple of instructions don't work at all ( nothing happens, not even when clicking on them). Then, the last bouth couples execute at the onload (but don't work after, when click on them). I see that using **addEventListener** with the listener function doesn't work with other parameters than just the **event** itself, but I'm still confused about the other ways — Andrei Manolache, Jan 05 '20 at 17:24

Shiny · Accepted Answer · 2020-01-05T17:55:52.183

.addEventListener takes a callback as the second parameter, so you don't need the () when you're adding your function.

Also, you can use this inside the callback function to refer to the Element that the Event triggered from - this just cleans up the function code a little bit - You don't need to includig any parameters to your languageChange function

LocalStorage doesn't work with Snippets on this site, so I wrote a quick Codepen to show the changes

localStorage.setItem("languageStored", "romanian");

var language = {
  eng: {welcome: "Welcome to my website!"},
  ro: {welcome: "Bine ai venit pe site-ul meu!"}
};

window.onload = function() {
  let optEngl = document.getElementById('english');
  let optRo = document.getElementById('romanian');

  optEngl.addEventListener('click', languageChange);
  optRo.addEventListener('click', languageChange);
}

function languageChange() {
  // Get the Language stored
  let languageStored = localStorage.getItem("languageStored");

  // You can use `this` rather than `obj` to refer to the Clicked Element
  if (languageStored != this.id) {
    languageStored = this.id;
    localStorage.setItem("languageStored", languageStored);

    if (languageStored == "english")
      document.getElementById('paragraph').textContent = language.eng.welcome;
    else
      document.getElementById('paragraph').textContent = language.ro.welcome;
    }
  }
}

Anush Shrestha · Answer 2 · 2020-01-05T18:14:54.783

I made couple of changes to your code.First, I think you can directly call functions from a tag and no need of window.onload. One issue I found with your code was when you were sending optEngl you were just sending as optEngl without any quotes which made js think it wasn't string. Then, I modified your string comparison within languageChange function using localeCompare rather than ==. Then, it worked fine. I hope this helps.

<html lang="en">
  <head>
    <title>
      Website
    </title>
    <meta charset="UTF-8">
  </head>

  <body>

    <a id='english' onClick="languageChange(this , 'optEngl');">English</a>
    <a id='romanian' onClick="languageChange(this , 'optRo');">Romanian</a>

    <p id="paragraph">
      Bine ai venit pe site-ul meu!
    </p>

    <script type="text/javascript">
      localStorage.setItem("languageStored", "romanian");

      var language = {
        eng: {
          welcome: "Welcome to my website!"
        },
        ro: {
          welcome: "Bine ai venit pe site-ul meu!"
        }
      };

      function languageChange(e, obj) {
        let languageStored = localStorage.getItem("languageStored");
        if (languageStored != obj) {
          localStorage.setItem("languageStored", obj);
          if (languageStored.localeCompare("optEngl")) {
            document.getElementById('paragraph').textContent = language.eng.welcome;
          } else {
            document.getElementById('paragraph').textContent = language.ro.welcome;
          }
        }
      }

    </script>

  </body>

</html>

If you want to see results, check out jsfiddle snippet

By using javascript:

<html lang="en">

  <head>
    <title>
      Website
    </title>
    <meta charset="UTF-8">
  </head>

  <body>

    <a id='english'>English</a>
    <a id='romanian'>Romanian</a>

    <p id="paragraph">
      Bine ai venit pe site-ul meu!
    </p>

    <script type="text/javascript">
      localStorage.setItem("languageStored", "romanian");

      var language = {
        eng: {
          welcome: "Welcome to my website!"
        },
        ro: {
          welcome: "Bine ai venit pe site-ul meu!"
        }
      };

      window.onload = function() {
        let optEngl = document.getElementById('english');
        let optRo = document.getElementById('romanian');

        optEngl.onclick = function() {
          languageChange(this, "optEngl");
        }
        optRo.onclick = function() {
          languageChange(this, "optRo");
        }
      }

      function languageChange(e, obj) {
        let languageStored = localStorage.getItem("languageStored");
        if (languageStored != obj) {
          localStorage.setItem("languageStored", obj);
          if (languageStored.localeCompare("optEngl")) {
            document.getElementById('paragraph').textContent = language.eng.welcome;
          } else {
            document.getElementById('paragraph').textContent = language.ro.welcome;
          }
        }
      }

    </script>

  </body>

</html>

I thought about that, but i don't want to change the html, just rely on the javascript. But thank you for your help :) — Andrei Manolache, Jan 05 '20 at 18:03
@AndreiManolache I updated my jsfiddle to work from js. You can check it out from link in my post. I just modified your js part to : optEngl.onclick = function(){languageChange(this , "optEngl");} optRo.onclick = function(){languageChange(this , "optRo");}` I wrapped the languageChange function with wrapper function() {} and I made input parameter optEngl -> "optEngl". I updated my answer as well. JS is weird to get around at first. Hope it helps. — Anush Shrestha, Jan 05 '20 at 18:12

setAttribute, onclick, eventListener won't work

2 Answers2