setAttribute、onclick、eventListener 不起作用

Question

所以我在 javascript 中有这段代码，它替换了 html 中的文本，具体取决于您单击的语言（罗马尼亚语或英语，默认为罗马尼亚语）。我尝试了我知道的所有 3 种点击操作方式，但其中 none 有效。你能帮帮我吗？

编辑：
前几条指令根本不起作用（没有任何反应，即使点击它们也没有）。然后，最后一对夫妇在加载时执行（但在单击它们之后不工作）。我看到将 addEventListener 与侦听器函数一起使用不适用于其他参数，而不仅仅是事件本身，但我仍然对其他方式感到困惑

<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> ```

Answer 1

.addEventListener 将回调作为第二个参数，因此在添加函数时不需要 ()。

此外，您可以在回调函数中使用 this 来引用触发事件的元素 - 这只是稍微清理了函数代码 - 您不需要包含任何参数到您的 languageChange 函数

LocalStorage 不适用于此站点上的代码段，因此我写了一个快速 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;
    }
  }
}

Answer 2

我对您的 code.First 进行了一些更改，我认为您可以直接从 a 标记调用函数而无需 window.onload。我在您的代码中发现的一个问题是，当您发送 optEngl 时，您只是作为 optEngl 发送而没有任何引号，这让 js 认为它不是字符串。然后，我使用 localeCompare 而不是 == 修改了 languageChange 函数中的字符串比较。然后，它工作正常。我希望这有帮助。

<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>

如果您想查看结果，请查看 jsfiddle 片段

通过使用 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>

setAttribute、onclick、eventListener 不起作用

setAttribute, onclick, eventListener won't work

javascript

onclick

addeventlistener

setattribute