无法将我的方法插入到 DOM 中的 console.log HTML

如何解决无法将我的方法插入到 DOM 中的 console.log HTML

我正在制作一个简单的时钟应用，它显示当前时间，作为结合 HTML 和 CSS 练习我的 JS 的一种方式（我对编码很陌生）。

我的代码运行良好，但我对试验时得到的意外结果感到困惑。我创建了一个类，实例化它，然后尝试打印我的 display() 方法插入到预先存在的 div (id="time") 中的内部 HTML。

见下文：

class Clock {
  constructor() {
    this.date = new Date;
    this.day = this.date.getDate();
    this.secs = this.date.getSeconds();
    this.mins = this.date.getMinutes();
    this.hours = this.date.getHours();
  }

  update(increment) {
    this.secs += increment;
    if (this.secs >= 60) {
      this.secs = this.secs - 60;
      this.mins++;
    }
    if (this.mins >= 60) {
      this.mins = 0;
      this.hours++;
    }
    if (this.hours >= 24) {
      this.hours = 0;
    }
  }
  display() {
    this.update(1);
    let HMS = [this.hours,this.mins,this.secs].map(item => item < 10 ? `0${item}` : item);
    document.getElementById('time').innerHTML = `${HMS[0]} : ${HMS[1]} : ${HMS[2]}`;
  }
  run() {
    setInterval(this.display.bind(this),1000);
  }
}


// TESTING

let clock = new Clock; // Create new clock instance
clock.run(); // Clock is running

let time = document.getElementById('time'); // Retrieving element that contains the time

console.log(time.innerHTML);

<div id="time"></div>

给出空字符串！为什么它不记录我在 display() 方法中插入的 HTML？

如上所述，我不明白为什么当我 console.log 时，作为 display() 方法的一部分插入到我的“时间”div 中的 HTML 没有被识别。我觉得在这个例子中有一个我没有掌握的概念，我无法弄清楚它是什么。

有人可以帮忙解释一下吗？

非常感谢！

解决方法

setInterval 不会立即触发，它只会在第一次延迟（1 秒）后开始触发。

因此，此时您的 console.log 会在时间 div 内发生任何事情之前触发。

解决此问题的一种方法是调用 this.display，然后设置 setInterval。

举例说明当前问题

在此示例中，我在时间 div 中添加了一些文本，您将在运行示例时看到该文本显示一秒钟并记录到控制台。

然后我在 1.5 秒后记录时间 div 内容，然后显示当前时间。

class Clock {
  constructor() {
    this.date = new Date;
    this.day = this.date.getDate();
    this.secs = this.date.getSeconds();
    this.mins = this.date.getMinutes();
    this.hours = this.date.getHours();
  }

  update(increment) {
    this.secs += increment;
    if (this.secs >= 60) {
      this.secs = this.secs - 60;
      this.mins++;
    }
    if (this.mins >= 60) {
      this.mins = 0;
      this.hours++;
    }
    if (this.hours >= 24) {
      this.hours = 0;
    }
  }
  display() {
    this.update(1);
    let HMS = [this.hours,this.mins,this.secs].map(item => item < 10 ? `0${item}` : item);
    document.getElementById('time').innerHTML = `${HMS[0]} : ${HMS[1]} : ${HMS[2]}`;
  }
  run() {
    setInterval(this.display.bind(this),1000);
  }
}


// TESTING

let clock = new Clock; // Create new clock instance
clock.run(); // Clock is running

let time = document.getElementById('time'); // Retrieving element that contains the time

console.log(time.innerHTML);

setTimeout(function(){
    console.log(time.innerHTML);
},1500);

<div id="time">Not Updated Yet</div>

解决问题的示例

在本例中，我所做的就是立即在您的 display() 函数中调用 run 函数，然后设置 setInterval。这样就可以立即设置时间，因此可以记录到控制台。

class Clock {
  constructor() {
    this.date = new Date;
    this.day = this.date.getDate();
    this.secs = this.date.getSeconds();
    this.mins = this.date.getMinutes();
    this.hours = this.date.getHours();
  }

  update(increment) {
    this.secs += increment;
    if (this.secs >= 60) {
      this.secs = this.secs - 60;
      this.mins++;
    }
    if (this.mins >= 60) {
      this.mins = 0;
      this.hours++;
    }
    if (this.hours >= 24) {
      this.hours = 0;
    }
  }
  display() {
    this.update(1);
    let HMS = [this.hours,this.secs].map(item => item < 10 ? `0${item}` : item);
    document.getElementById('time').innerHTML = `${HMS[0]} : ${HMS[1]} : ${HMS[2]}`;
  }
  run() {
    this.display();
    setInterval(this.display.bind(this),1000);
  }
}


// TESTING

let clock = new Clock; // Create new clock instance
clock.run(); // Clock is running

let time = document.getElementById('time'); // Retrieving element that contains the time

console.log(time.innerHTML);

<div id="time"></div>

,

class Clock {
  constructor() {
    this.date = new Date;
    this.day = this.date.getDate();
    this.secs = this.date.getSeconds();
    this.mins = this.date.getMinutes();
    this.hours = this.date.getHours();
  }

  update(increment) {
    this.secs += increment;
    if (this.secs >= 60) {
      this.secs = this.secs - 60;
      this.mins++;
    }
    if (this.mins >= 60) {
      this.mins = 0;
      this.hours++;
    }
    if (this.hours >= 24) {
      this.hours = 0;
    }
  }
  display() {
    this.update(1);
    let HMS = [this.hours,1000);
  }
}


// TESTING

let clock = new Clock; // Create new clock instance
clock.run(); // Clock is running

let time = document.getElementById('time'); // Retrieving element that contains the time

console.log(time);

<div id="time"></div>