Native JS in custom class: "Uncaught TypeError: Cannot set property 'innerHTML' of undefined"

Question

原谅标题，我不太确定问题是什么...我现在有点猜测。

这是我在 Javascript 中首次尝试可重用 class。这是它的精简版：

Countdown = function ( elementID ) {
  this.timer = null;
  this.output = '';
  this.element = document.getElementById(elementID) || document.getElementById('countdown');
}

Countdown.prototype.start = function () {
  this.timer = setInterval(this.run, 1000);
}

Countdown.prototype.run = function () {
  this.output = 'test';
  this.element.innerHTML = this.output; /* THE PROBLEM IS HERE */
}

Countdown.prototype.toCalculatedTime = function () {
  this.start();
}

var c = new Countdown();
c.toCalculatedTime();

console.log(c);

我遇到错误：

Uncaught TypeError: Cannot set property 'innerHTML' of undefined"

在指定行。

首先，是的，有一个 ID 为 'countdown' 的元素。我已经尝试在标记和 class 中更改元素的名称。我已经尝试在实例化此 class 时传递元素名称，但似乎没有什么区别。

我真的不知道该怎么办。在控制台中，看起来我的 class 构建得很好。

Answer 1

错误是说 this.element 未定义。未定义的原因是因为 setTimeout 导致 run 在 window 范围内执行。您需要通过使用 bind 或闭包来将范围绑定到此。

this.timer = setInterval(this.run.bind(this), 1000);

或

var that = this;
this.timer = setInterval(function(){ that.run(); }, 1000);

Native JS in custom class: "Uncaught TypeError: Cannot set property 'innerHTML' of undefined"

Native JS in custom class: "Uncaught TypeError: Cannot set property 'innerHTML' of undefined"

javascript

object

innerhtml

setinterval