`var` 未定義，但不明白為什么

Question

我一直試圖理解為什么我在 HTML 中的 js 代碼現在無法工作，因為它位於外部文件中。 英語不是我的第一語言，這讓我更難理解（西班牙語的結果並不像我希望的那樣富有成效）。

我從字面上將代碼復制粘貼到另一個文件並放置<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')
      });    
  }

}());

Answer 1

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 標簽，這會阻止腳本在頁面加載之前運行。

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

問題 #2 - 吊裝

JavaScript 代碼還有一個問題，可能會導致錯誤。 這與“提升”有關，其中變量和 function 聲明被“提升”到其塊的頂部。

這個 JavaScript 涉及一些吊裝：

function () {
  'use strict';

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

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

  setLocalStorage();

}

由於吊裝，它實際上是這樣做的：

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 中使用未設置的變量。 這段代碼做同樣的事情，沒有任何提升問題：

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

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

Answer 2

實際上，根據您的代碼，您正在訪問DOM元素，並且您正在調用它們來執行某些任務。 但是假設您試圖訪問一些不可用的DOM內容，然后告訴他們做某事。 在這種情況下，如果您嘗試訪問某些DOM但 javascript 找不到它將返回undefined 。 這就是為什么你會得到undefined 。 （我試圖簡單地解釋它）

請確保您有一些名稱為 class 的元素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')
          });    
      }

    }());

`var` 未定義，但不明白為什么

問題描述

2 個解決方案

解決方案1
2 2020-05-28 17:45:02

解決方案2
1 已采納 2020-05-28 17:45:24

`var` 未定義，但不明白為什么

問題描述

2 個解決方案

解決方案1 2 2020-05-28 17:45:02

解決方案2 1 已采納 2020-05-28 17:45:24

解決方案1
2 2020-05-28 17:45:02

解決方案2
1 已采納 2020-05-28 17:45:24