的innerText不工作，一個簡單的時鐘

我發現clockDiv = NULL我不知道這是爲什麼壽

原帖**

我試圖做一個簡單的數碼時鐘。所有的工作，但打印我的Var在DIV似乎給了我很多麻煩。出於某種原因，當我使用innerText時，代碼會停止。它可能是一個簡單的修復，但我沒有看到這個錯誤。

function displayTime() { 
 
    var currentTime = new Date(); 
 
    var hours = currentTime.getHours(); 
 
    var minutes = currentTime.getMinutes(); 
 
    var seconds = currentTime.getSeconds(); 
 

 
    // This gets a "handle" to the clock div in our HTML 
 
    var clockDiv = document.getElementsByClassName("clock")[0]; 
 

 
    // Then we set the text inside the clock div 
 
    // to the hours, minutes, and seconds of the current time 
 
    clockDiv.innerText = (hours + ":" + minutes + ":" + seconds); 
 

 
    setInterval(displayTime, 999); 
 
} 
 

 
// This runs the displayTime function the first time 
 
displayTime();

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
     <meta charset="UTF-8"> 
 
     <script src="mainpagejavascript.js"></script> 
 
     <title>Raspberry Pi Connect</title> 
 
    </head> 
 
    <body> 
 
     <header> 
 
      <h1> Raspberry Pi Connect</h1> 
 
     </header> 
 
     <form method="post"> 
 
      Name:<input type="text" name="text"/> 
 
      <input type="submit" name="submit"/> 
 
     </form> 
 
     <div class='clock'></div> 
 
     <div class="alarmcollect"> 
 
      <hr/> 
 
      <h4 class="AlarmHeader"> Alarm Times!</h4> 
 
      <hr/> 
 
      <p>9:00</p> 
 
      <button class="button" style="vertical-align:middle"><span>Set Alarm</span></button> 
 
     </div> 
 
     <p class="AlarmTimes">Alarm Times:</p> 
 
    </body> 
 
</html>

來源

2017-08-02 Anton van der Wel

我把你的代碼粘貼到一個代碼片段中，它看起來很好 – j08691

哦，這很奇怪，所以問題必須在我的代碼的其餘部分。因爲在我的項目上時鐘不顯示。給我一會我會嘗試尋找另一個問題如果我沒有發現我會張貼另一個;） –

這是相當奇怪，它顯示在代碼片段，但不是在我的瀏覽器，如果我運行相同的代碼 –

的問題是，通過將你的腳本標記到它獲取文檔（包括時鐘DIV）的其餘部分之前執行的頭得到加載。因此，clockDiv未定義，並且訪問innerText會導致引發異常，該異常會停止執行（在間隔設置之前）。

一個解決方案是將事件偵聽器附加到DOMContentLoaded事件（對於IE8/9到readystatechange）或（可能更簡單）將腳本標記移動到主體的末尾。

來源

2017-08-02 20:15:21 Stephan

的innerText不工作，一個簡單的時鐘

回答

相關問題