無法控制台記錄我的方法插入 DOM 的 HTML

Question

我正在制作一個簡單的時鍾應用程序，它顯示當前時間，作為結合 HTML 和 CSS 練習我的 JS 的一種方式（我對編碼很陌生）。

我的代碼運行良好，但我對實驗時得到的意外結果感到困惑。 我創建了一個 class，對其進行實例化，然后嘗試打印我的 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。 我覺得這個例子中有一個我沒有掌握的概念，我無法弄清楚它是什么。

有人可以幫忙解釋一下嗎？

非常感謝！

Answer 1

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>

演示解決問題的示例

在這個例子中，我所做的只是在你的run function 中立即調用display() function 然后設置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.mins, 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>

Answer 2

 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);

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