为什么会出现“无法读取未定义的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