設置屬性 Javascript

| | | | | | | | | | | | | | | | | | | | | | | | |

innerHTML 屬性允許您使用 JavaScript 定義元素的內容。

如果您指定了無效的元素值使用innerHTML方法或者在頁面上顯示元素之前放置腳本,您將遇到錯誤“Uncaught TypeError: Unable to set the "innerHTML" null "property 。錯誤

在本指南中,我們將討論此錯誤的含義以及您可能會遇到它的原因。我們將查看此錯誤的示例,以便您了解如何在 JavaScript 中修復它

Uncaught TypeError:。無法將屬性“innerHTML”設置為 null

InnerHTML 屬性鏈接到您正在使用 JavaScript 的任何 Web 元素。您使用“getter”從頁面中選擇了一個 Web 元素,例如 getElementById () ,或者您在 JavaScript 中創建了一個想要修改的元素。

“無法將屬性 `innerHTML` 設置為 null”錯誤是類型錯誤。這意味著我們試圖將屬性或函數應用於不支持屬性或函數的值。

在這種情況下,我們試圖將 innerHTML 的值設置為相等的元素.空值。 NULL 值不是 innerHTML 屬性

導致此錯誤的常見原因有兩個。

  • 在網頁上出現項目之前插入腳本
  • 引用錯誤的item ID。

我們來分析一下根本原因,這可能是新手最常犯的錯誤。

示例場景

我們將編寫一個顯示時間的簡單站點。首先,定義一個基本的 HTML 頁面。這個 HTML 頁面將是我們顯示天氣的畫布:

這個 HTML 頁麵包含一個 標籤包含定義網頁標題的

</pre></code>。 <code><body></code> 包含一個段落</p> </a> </div> <p>在段落中,我們添加了一個<a href="/html-span/"> <span> </a>.我們將在我們的JavaScript代碼中將這個標籤的內容替換為當前時間</p><p>然後寫一個腳本來檢索時間,我們將在 <code><head> </code> 中添加此 JS 代碼:..</p> <p>我們的文檔現在包含 HTML 和 JavaScript。<code>getElementById ()</代碼> 獲取我們的水療中心n 標籤<code>SHOW_TIME</code>。然後,我們使用 <ah ref = "/JavaScrip t-Date/">JavaScript 模塊日期 </a> 標記檢索當前日期。</p><p>在下面的代碼行中,我們創建了一個顯示一天中的當前小時和小時的分鐘。此字符串使用以下結構:</p><p><code>HH: MM</code></p><p>有兩個句點分隔小時和分鐘的值“Äã,Äã”。我們使用一種稱為 <a href="/javascript-string-interpolation/"> JavaScript 字符串插值</a> 的技術來創建這個字符串。這使我們能夠將多個值整合到同一個鏈中。最後,我們使用innerHTML方法在我們的網頁上顯示這個時間</p><p>我們的網頁打開讓我們在網絡瀏覽器中。</p><figure class = `wp-圖片塊-" > <IMG SRC =“https://lh6.googleusercontent.com/anZ4ckRYEF5OaualeffjXeLSKVdoZPV32w1Nl8cpU-YEy5nQeJ0KGFVR1DRUUwylZjjqemanwOj5z7NlgdEQ_qdcgAYzjdRMP9gFpr7tv4llZiOidmnmavbFUMa2ljCLqw”ALT =“AnZ4ckRYEF5OaualeffjXeLSKVdoZPV32w1Nl8cpU YEy5nQeJ0KGFVR1DRUUwylZjjqemanwOj5z7NlgdEQ QdcgAYzjdRMP9gFpr7tv4llZiOidmnmavbFUMa2ljCLqw”> </圖> <p>我們的網頁無法顯示的時間。如果我們看一下JavaScript控制台,我們可以看到一個錯誤:</p> <p>這是“無法將`innerHTML`屬性設置為null”的另一種表示。它告訴我們我們試圖將innerHTML的值設置為的元素為零。</p><h2>解決方案</h2><p>由於 <code>SHOW_TIME</code> 的值為零,我們可以推斷出 JavaSc ript 無法正確檢索 ID 為 <code>SHOW_TIME</code> 的元素。</p><p>在這種情況下,原因是我們輸入了 <code><; script></code> 太早了。我們的 <code> ... </pre> </div> <p>我們已將 <code> </div> <h2>結論</h2><p>錯誤“Uncaught TypeError: Unable to set property `innerHTML` null” 該錯誤是在嘗試為其值的元素設置innerHTML值時引起的等於零。</p><p>要更正此錯誤,請確保您的 <code><script></code> 位於您要在腳本中選擇的元素之後。如果這不能解決問題,請務必在您的程序中選擇一個有效的項目。</p>