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

导致错误的原因是el未在getTime的范围内定义。

在getTime的父范围counterFn中，el已定义，因为您在counterFn(el, delay) setup函数el = document.getElementById('canv')中调用它时为其赋予了值getTime

但是，在el的范围内，您没有为el提供值。因此undefined变为innerHTML。

代码的另一个问题是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>

window.onload

Answer 2

这里的一个潜在问题是，您尝试在DOM中存在之前获取画布，您需要将代码包装在setInterval(getTime, delay);事件中以防止这种情况发生。

接下来的代码如下：

getTime

您将setInterval(function(){ getTime(el); }, wait);定义为期望参数但未传递参数，而是您需要执行以下操作：

el.innerHTML(counter);

最后el.innerHTML = counter;应为<div id="firstDiv"> <div id="secondDiv"> <span> {{someproperty}}</span> <div> </div>。

Working Fiddle here

为什么我得到“无法读取未定义的HTML属性”？

2 个答案: