var появляется как undefined, но не может понять почему - PullRequest
Новая
       91

var появляется как undefined, но не может понять почему

1 голос
/ 28 мая 2020

Я пытался понять, почему мой код js, который был внутри HTML, теперь не работает, поскольку он находится во внешнем файле. Engli sh - не мой первый язык, из-за чего меня еще труднее понять (а результаты spani sh оказались не очень продуктивными, как я надеялся).

Я буквально копирую и вставляю код на другой файл и поместил <script src="core.js"></script>, чтобы загрузить js, но оба Firefox и Chrome продолжают сообщать мне "TypeError: eng is undefined", когда это происходит.

Прежде, чем кто-либо скажет мне, на него уже ответили в других вопросах, да, я видел, что это было. Но я ничего не понимаю, поэтому, если бы кто-нибудь мог объяснить мне, как «JS для чайников», было бы ДЕЙСТВИТЕЛЬНО признательно.

Код: 

//SETS "LOCALE" "EN" TO REDIRECT TO ENGLISH
(function (){
  'use strict';

 var eng = document.querySelector('.eng')

  function setLocalStorage(){
     eng.addEventListener('click', () => {
      localStorage.setItem('locale','en')
    })
  }
  setLocalStorage()

}());

//SETS "LOCALE" "ES" TO REDIRECT TO SPANISH
(function (){
  'use strict';

  var esp = document.querySelector('.esp')

  function setLocalStorage(){
     esp.addEventListener('click', () => {
      localStorage.setItem('locale','es')
    })
  }
  setLocalStorage()

}());

//GETS THE "LOCALE" AND REDIRECT
(function () {
  'use strict';

  const locale = localStorage.getItem('locale');

  if (locale === 'en') {
    window.location = 'eng.html';

  } else if (locale === 'es') {
    window.location = 'esp.html';

  } else {
    // first visit:
    document
      .querySelector('.eng')
      .addEventListener('click', () => {
        localStorage.setItem('locale', 'en')
      });

    document
      .querySelector('.esp')
      .addEventListener('click', () => {
        localStorage.setItem('locale', 'es')
      });    
  }

}());

Ответы [ 2 ]

2 голосов
/ 28 мая 2020

Эта строка JavaScript: 

var eng = document.querySelector('.eng')

пытается получить доступ к элементу на странице HTML, который, вероятно, выглядит так: 

<div class="eng">english text here</div>

Для того, чтобы код JavaScript, чтобы найти этот элемент HTML, страница должна быть уже загружена до запуска строки JavaScript кода. В противном случае выражение document.querySelector('.eng') вернет значение null.

Чтобы повысить шансы того, что HTML будет загружен и доступен до запуска JavaScript, рекомендуется поместить свои сценарии в нижняя часть элемента <body>. Примерно так: 

<body>
  <div class="eng">english text</div>
  <script src="myjavascript.js"></script>
<body>

Но это не полная гарантия. Чтобы еще больше повысить свои шансы, вы можете добавить атрибут defer к тегу скрипта, который предотвращает запуск скрипта до тех пор, пока страница не загрузится. 

<script src="myjavascript.js" defer></script>

Проблема №2 - Поднятие

. Есть еще одна проблема с кодом JavaScript, которая может вызвать ошибку. Это связано с «подъемом», когда переменные и объявления функций «поднимаются» наверх своих блоков.

Это JavaScript включает в себя подъем: подъем, он на самом деле делает это: 

function () {

  // declare 'eng' as undefined
  var eng; 

  // declare setLocalStorage
  function setLocalStorage () {

    // JavaScript interpreter says during declaration:
    // "TypeError: I don't know what 'eng.addEventListener' is"

    eng.addEventListener('click', () => {
      localStorage.setItem('locale', 'en');
    });
  }

  // set 'eng'
  eng = document.querySelector('.eng');

  // now that 'eng' is set, call setLocalStorage
  setLocalStorage();

}

Исправление - не используйте неустановленную переменную в поднятой функции. Этот код делает то же самое, без проблем с подъемом: 

(function () {
  var eng = document.querySelector('.eng');

  eng.addEventListener('click', () => {
      localStorage.setItem('locale', 'en');
    });
})();
1 голос
/ 28 мая 2020

Фактически в соответствии с вашим кодом вы обращаетесь к элементу DOM и далее вызываете их для выполнения некоторой задачи. Но предположим, что вы пытаетесь получить доступ к некоторому недоступному DOM контенту, а затем просите их что-то сделать. В этом случае, если вы пытаетесь получить доступ к некоторому DOM, но javascript не может найти, он вернет undefined. Вот почему вы получите undefined. (я пытаюсь объяснить это легко)

Пожалуйста, убедитесь, что у вас есть элементы с именем класса eng и esp.

Итак, чтобы преодолеть этот случай, вам нужно проверьте, есть ли у вас доступ к ним, а затем дайте задание выполнить.

Предположим, я проверяю здесь, присутствует ли eng, а затем назначаю ему какую-то задачу. 

eng && eng.addEventListener('click', () => {
    localStorage.setItem('locale','en')
})

Полный код здесь. 

//SETS "LOCALE" "EN" TO REDIRECT TO ENGLISH
(

    function (){
      'use strict';

     var eng = document.querySelector('.eng')

      function setLocalStorage(){
         eng && eng.addEventListener('click', () => {
          localStorage.setItem('locale','en')
        })
      }
      setLocalStorage()

    }());

    //SETS "LOCALE" "ES" TO REDIRECT TO SPANISH
    (function (){
      'use strict';

      var esp = document.querySelector('.esp')

      function setLocalStorage(){
         esp && esp.addEventListener('click', () => {
          localStorage.setItem('locale','es')
        })
      }
      setLocalStorage()

    }());

    //GETS THE "LOCALE" AND REDIRECT
    (function () {
      'use strict';

      const locale = localStorage.getItem('locale');

      if (locale === 'en') {
        window.location = 'eng.html';

      } else if (locale === 'es') {
        window.location = 'esp.html';

      } else {
        // first visit:
        document
          .querySelector('.eng')
          .addEventListener('click', () => {
            localStorage.setItem('locale', 'en')
          });

        document
          .querySelector('.esp')
          .addEventListener('click', () => {
            localStorage.setItem('locale', 'es')
          });    
      }

    }());
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...