為什么會出現“無法讀取未定義的html屬性”？

Question

我正在建立一個簡單的計數器來練習JS中的閉包，但似乎無法克服此錯誤。 在我看來，將變量elem設置為canv的id應該可以，但是顯然沒有任何聯系。 我在這里做錯了什么？

我的HTML：

<body>
  <div id="canv">

  </div>
</body>

我的JS：

function setup(delay) {
  var el = document.getElementById('canv');

  counterFn(el, delay);
}

function counterFn(el, delay) {
  var counter = 0;

  setInterval(getTime, delay);

  function getTime(el) {
    el.innerHTML(counter);
    counter++;
  }
}

setup(500);

這一切感覺非常基礎，但是我似乎無法弄清楚自己在做什么錯。

這是一個JS小提琴。 https://jsfiddle.net/8sjaqdrh/2/

Answer 1

導致該錯誤的原因是，未在getTime范圍內定義el 。

在getTime的父作用域counterFn ，定義了el是因為在setup函數el = document.getElementById('canv')中的counterFn(el, delay)調用它時給了它一個值。

但是，在getTime范圍內，沒有為el提供值。 所以el變得undefined 。

代碼的另一個問題是innerHTML使用不正確。

只需將參數從function getTime(el){...刪除到function getTime(el){...即可function getTime(){... 。

至於innerHTML ，它不是一個函數。 因此不能像innerHTML(counter)那樣調用它。

正確的方法是直接為它分配一個值，例如innerHTML = counter 。

 function setup(delay) { var el = document.getElementById('canv'); counterFn(el, delay); } function counterFn(el, delay) { var counter = 0; setInterval(getTime, delay); // Corrected code: function getTime() { el.innerHTML = counter; counter++; } /* Your code function getTime(el){ el.innerHTML(counter); counter++; } */ } setup(500);

 <div id="canv"></div>

Answer 2

這里一個潛在的問題是，您試圖在畫布在DOM中存在之前獲取它，您將希望將代碼包裝在window.onload事件中，以防止發生這種情況。

下面是下面的代碼：

setInterval(getTime, delay);

您將getTime定義為期望參數，但未傳遞參數，而是需要執行以下操作：

setInterval(function(){ getTime(el); }, wait);

最后是el.innerHTML(counter); 應該是el.innerHTML = counter; 。

在這里工作小提琴

為什么會出現“無法讀取未定義的html屬性”？

問題描述

2 個解決方案

解決方案1
2 已采納 2017-07-28 19:16:06

解決方案2
0 2017-07-28 19:16:11

為什么會出現“無法讀取未定義的html屬性”？

問題描述

2 個解決方案

解決方案1 2 已采納 2017-07-28 19:16:06

解決方案2 0 2017-07-28 19:16:11

解決方案1
2 已采納 2017-07-28 19:16:06

解決方案2
0 2017-07-28 19:16:11