無法設置屬性'innerHTML'的值：對象爲空或未定義

當我嘗試在頁面中顯示這些函數的結果時，它會返回錯誤。錯誤：無法設置屬性'innerHTML'的值：對象爲空或未定義無法設置屬性'innerHTML'的值：對象爲空或未定義

腳本工作，它們不是我的。我從網上找到的實例中得到了它們。

EDITEDL：我沒有改變它，但仍得到相同的錯誤

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
     #header { 
      font-size: 5em; 
     } 
    </style> 

    <script type="text/javascript"> 

     function updateclock() { 
      var currentTime = new Date(); 

      var currentHours = currentTime.getHours(); 
      var currentMinutes = currentTime.getMinutes(); 
      var currentSeconds = currentTime.getSeconds(); 

      // Pad the minutes and seconds with leading zeros, if required 
      currentMinutes = (currentMinutes < 10 ? "0" : "") + currentMinutes; 
      currentSeconds = (currentSeconds < 10 ? "0" : "") + currentSeconds; 

      // Choose either "AM" or "PM" as appropriate 
      var timeOfDay = (currentHours < 12) ? "AM" : "PM"; 

      // Convert the hours component to 12-hour format if needed 
      currentHours = (currentHours > 12) ? currentHours - 12 : currentHours; 

      // Convert an hours component of "0" to "12" 
      currentHours = (currentHours == 0) ? 12 : currentHours; 

      // Update the time display 
      document.getElementById("clock").innerHTML = (currentHours + ":" + currentMinutes + ":" + currentSeconds + " " + timeOfDay); 
     } 

     function updatedate() { 

      var d_names = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"); 

      var m_names = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"); 

      var d = new Date(); 
      var curr_day = d.getDay(); 
      var curr_date = d.getDate(); 
      var sup = ""; 
      if (curr_date == 1 || curr_date == 21 || curr_date == 31) { 
       sup = "st"; 
      } 
      else if (curr_date == 2 || curr_date == 22) { 
       sup = "nd"; 
      } 
      else if (curr_date == 3 || curr_date == 23) { 
       sup = "rd"; 
      } 
      else { 
       sup = "th"; 
      } 
      var curr_month = d.getMonth(); 
      var curr_year = d.getFullYear(); 

      document.getElementById("date").innerHTML = (d_names[curr_day] + " " + curr_date + "<SUP>" + sup + "</SUP> " + m_names[curr_month] + " " + curr_year); 

     } 

     updateclock(); 
     setInterval(updateclock, 1000); 

     updatedate(); 
     setInterval(updatedate, 1000); 

    </script> 

</head> 
<body> 
    <table> 
     <tr> 
      <td> 

      </td> 
      <td style="text-align=center" id =header> 

      </td> 
      <td> 
       <span id="date">&nbsp;</span> 
       <span id="clock">&nbsp;</span> 
      </td> 
     </tr> 
    </table> 
</body> 
</html>

來源

2013-02-05 John White

更換

document.getElementById("#date") 
//And 
document.getElementById("#clock")

隨着

document.getElementById("date") 
//And 
document.getElementById("clock")

getElementById不需要包括hashtag（# ），這是CSS選擇器用來指定我的東西t是您要查找的id。
（就像一個週期（.）用於類）

此外，刪除從HTML的主題標籤：

<span id="date">&nbsp;</span> 
<span id="clock">&nbsp;</span>

相反的：

<span id="#date">&nbsp;</span> 
<span id="#clock">&nbsp;</span>

來源

2013-02-05 15:10:31 Cerbrus

實際上，因爲他的HTML在跨度上的'id'屬性中有'＃'，所以我們都錯了。 –

@ T.J.Crowder：我想我們剛剛得到了htm-punk。在兩個實際工作中添加一個'＃'：P – Cerbrus

@ Cerbrus：確實如果它確實在兩個地方。 –

首先，刪除＃在

document.getElementById("date")

你不是在jQuery中，而是在純JavaScript的。

然後，當你調用

updatedate(); 
    setInterval(updatedate, 1000);

HTML代碼尚未初始化。

你應該把它叫做一個事件，的onLoad在體內例如：

<body onLoad="updatedate();setInterval(updatedate, 1000);">

或者得到所有你想要運行，並把它放在一個函數的代碼：

function runAtStart() 
{ 
     // Put here all the code you want to launch when page loaded 
     updateclock(); 
     setInterval(updateclock, 1000); 
}

而且然後添加到標記：

<body onLoad="runAtStart();">

最後的想法，也許是更好的，將調用的函數在e人體的第二（所有的HTML代碼將被initiliazed）：

<body> 
<table> 
    <tr> 
     <td> 

     </td> 
     <td style="text-align=center" id =header> 

     </td> 
     <td> 
      <span id="date">&nbsp;</span> 
      <span id="clock">&nbsp;</span> 
     </td> 
    </tr> 
</table> 
<script language="javascript> 
    updatedate(); 
    setInterval(updatedate, 1000); </script> 
</body>

來源

2013-02-05 15:15:46 kube

您能否提供一個如何在主體中運行調用腳本的示例。我無法讓他們兩人在同一條線上運行。 –

我修改了我的答案，使其更加精確。 – kube

那它工作？ – kube

的問題是，你的初始updateclock()和updatedate()函數被調用之前DOM已準備就緒。想想這樣：

您的瀏覽器加載頁面。
它擊中<script>標記並開始運行JavaScript。
它試圖運行你的函數並從DOM獲取一個項目（即document.getElementById("date")）。這個元素尚未加載，所以它返回null。如果對象不存在，則不能調用.innerHTML。

要解決此問題，您必須在加載時運行腳本。在jQuery中，這就是：

$(function() { 
    updateclock(); 
    setInterval(updateclock, 1000); 

    updatedate(); 
    setInterval(updatedate, 1000); 
}

否則，你可以把它們放在一個函數，然後onload="functionName()"屬性添加到body標籤。

另外，正如其他人所提到的，您應該將#放入ID中。

來源

2013-02-05 15:16:15

好，您嘗試更新尚未創建一個對象...

測試剛剛轉會表格下方的JavaScript ..

<table> 
    <tr> 
     <td> 

     </td> 
     <td style="text-align=center" id =header> 

     </td> 
     <td> 
      <div id="date">&nbsp;</div> 
      <div id="clock">&nbsp;</div> 
     </td> 
    </tr> 
</table> 
<script type="text/javascript"> 

    function updateclock() { 
     var currentTime = new Date(); 

     var currentHours = currentTime.getHours(); 
     var currentMinutes = currentTime.getMinutes(); 
     var currentSeconds = currentTime.getSeconds(); 

     // Pad the minutes and seconds with leading zeros, if required 
     currentMinutes = (currentMinutes < 10 ? "0" : "") + currentMinutes; 
     currentSeconds = (currentSeconds < 10 ? "0" : "") + currentSeconds; 

     // Choose either "AM" or "PM" as appropriate 
     var timeOfDay = (currentHours < 12) ? "AM" : "PM"; 

     // Convert the hours component to 12-hour format if needed 
     currentHours = (currentHours > 12) ? currentHours - 12 : currentHours; 

     // Convert an hours component of "0" to "12" 
     currentHours = (currentHours == 0) ? 12 : currentHours; 

     // Update the time display 
     document.getElementById("clock").innerHTML = (currentHours + ":" + currentMinutes + ":" + currentSeconds + " " + timeOfDay); 
    } 

    function updatedate() { 

     var d_names = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"); 

     var m_names = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"); 

     var d = new Date(); 
     var curr_day = d.getDay(); 
     var curr_date = d.getDate(); 
     var sup = ""; 
     if (curr_date == 1 || curr_date == 21 || curr_date == 31) { 
      sup = "st"; 
     } 
     else if (curr_date == 2 || curr_date == 22) { 
      sup = "nd"; 
     } 
     else if (curr_date == 3 || curr_date == 23) { 
      sup = "rd"; 
     } 
     else { 
      sup = "th"; 
     } 
     var curr_month = d.getMonth(); 
     var curr_year = d.getFullYear(); 

     document.getElementById("date").innerHTML = (d_names[curr_day] + " " + curr_date + "<SUP>" + sup + "</SUP> " + m_names[curr_month] + " " + curr_year); 

    } 

    updateclock(); 
    setInterval(updateclock, 1000); 

    updatedate(); 
    setInterval(updatedate, 1000); 

</script>

，它會工作。（以及我刪除了＃因爲afair DOM ID必須以字母開頭）因爲我假設您想要將腳本保留在標題中，所以您必須對其進行編輯以包含在DOM完全構建後調用的onLoad函數。

[編輯] 該死太慢;）

來源

2013-02-05 15:46:26 itsid

我不認爲任何解決方案的有什麼關係的錯誤消息。關鍵詞是「undefined」。這是因爲對'innerHTML'元素（「date」和「clock」）有前向引用，即這些元素是在JS試圖通過'getElementById（）'訪問它們之後定義的。因此，無論腳本是否必須遵循id =「{element}」或「getElementById（）'，都必須在整個頁面之後被調用的函數中使用 - 包括這些元素的定義 - 已被讀取，例如通過一個按鈕。

來源

2017-06-23 10:06:19 Apostolos

無法設置屬性'innerHTML'的值：對象爲空或未定義

回答

相關問題