setAttribute, onclick, eventListener не будет работать - PullRequest
Новая
       64

setAttribute, onclick, eventListener не будет работать

0 голосов
/ 05 января 2020

Итак, у меня есть этот код в javascript, который заменяет текст из html, в зависимости от языка, на котором вы нажимаете (румынский или английский sh, по умолчанию - румынский). Я попробовал все 3 способа, которые я знаю для действия щелчка, но ни один из них не работает. Не могли бы вы мне помочь?

РЕДАКТИРОВАТЬ:
Первая пара инструкций вообще не работает (ничего не происходит, даже при нажатии на них). Затем последние две пары выполняются при нагрузке (но не работают после щелчка по ним). Я вижу, что использование 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> ```

Ответы [ 2 ]

1 голос
/ 05 января 2020

Я внес пару изменений в ваш код. Во-первых, я думаю, что вы можете напрямую вызывать функции из тега a и не нуждаетесь в window.onload. Одна проблема, которую я обнаружил в вашем коде, заключалась в том, что когда вы отправляли optEngl, вы просто отправляли как optEngl без кавычек, из-за которых js думали, что это не строка. Затем я изменил сравнение строк в функции languageChange, используя localeCompare вместо ==. Тогда все работало нормально. Надеюсь, это поможет. 

<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>
1 голос
/ 05 января 2020

.addEventListener принимает обратный вызов в качестве второго параметра, поэтому вам не нужно () при добавлении функции.

Также вы можете использовать this внутри функции обратного вызова для ссылки на элемент, с которого сработало событие - это просто немного очищает код функции - вам не нужно включать какие-либо параметры в вашу languageChange функцию

LocalStorage не работает со Snippets на этом сайте, поэтому я написал быстрый Codepen, чтобы показать изменения 

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;
    }
  }
}
...