`var`尚未定义，但不明白为什么

Question

我一直试图了解为什么我的HTML内的js代码现在在外部文件中后无法正常工作。英语不是我的第一语言，这使我更加难以理解（西班牙语的结果并没有达到我希望的生产力）。

我从字面上将代码复制粘贴到另一个文件中，然后放置<script src="core.js"></script>以加载js，但是Firefox和Chrome一直告诉我"TypeError: eng is undefined"何时加载。

在有人告诉我之前，它已经在其他问题中得到答复，是的，我看到了。但是我什么都不懂，所以如果有人能像“ JS for dummies”这样向我解释，我将不胜感激。

代码是：

//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')
      });    
  }

}());
我一直试图了解为什么我的HTML内的js代码现在在外部文件中后无法正常工作。英语不是我的母语，这使我更难理解（...

Answer 1

实际上，根据您的代码，您正在访问DOM元素，并且进一步要求它们执行某些任务。但是，假设您正在尝试访问一些不可用的DOM内容，然后告诉他们执行某些操作。在这种情况下，如果您尝试访问某些DOM，但javascript找不到它将返回undefined。这就是为什么您会得到undefined的原因。 （我想轻松地解释一下）

请确保您具有某些类别名称为eng和esp的元素。

Answer 2

此行JavaScript：