![如何修復JavaScript中的 "uncaught typeerror: cannot set property" 錯誤](https://static.wbolt.com/wp-content/uploads/2023/11/uncaught-typeerror-cannot-set-property-1024x512-1.jpg!o "如何修復JavaScript中的 "uncaught typeerror: cannot set property" 錯誤")
作為一名網路開發人員，在使用 JavaScript 時難免會遇到錯誤。編碼錯誤會阻止程式完成預期的操作。
為了能夠修復這些錯誤，您需要能夠理解錯誤資訊，因為這將有助於您理解錯誤產生的原因以及如何修復。
在本教程中，我們將討論 JavaScript 中的 “uncaught typeerror: cannot set property” 錯誤。
您將瞭解到該錯誤發生的原因、可能遇到該錯誤的不同原因以及修復該錯誤的不同方法。
“Uncaught TypeError: Cannot set property”在JavaScript中的意思是什麼？
typeerror 主要發生在涉及不相容資料型別的操作中。在我們的案例中，我們遇到了“uncaught typeerror: cannot set property”錯誤，這是一個 JavaScript 錯誤，主要發生在您嘗試向一個具有 null 值的DOM元素分配屬性時。
出現這個錯誤可能有不同的原因，如：
- 在標記中將
script標籤放置在錯誤的位置。 - 引用DOM元素時出現拼寫錯誤。
- 訪問未定義或無效的DOM元素。
在接下來的部分中，我們將討論上述原因，以及它們如何通過程式碼示例引發“uncaught typeerror: cannot set property”錯誤，以及如何修復此錯誤。
我們還將討論如何確定變數是 null 還是 undefined 。
如何修復JavaScript中的“uncaught typeerror: cannot set property”錯誤
在本節中，您將瞭解到JavaScript中“uncaught typeerror: cannot set property”錯誤的常見原因。接下來的每個小節都專門介紹其中一種原因及其解決方法。
您還可以通過一些實際的程式碼示例來了解如何修復這個錯誤。
無效的 script 標籤放置位置
當一個網頁載入時，為該頁面編寫的JavaScript程式碼也會被載入。JavaScript如何識別文件物件模型(DOM)取決於您在程式碼中放置 script 標籤的位置。
如果您將 script 標籤放置在 head 標籤內或在 body 標籤內所有HTML元素之上，那麼該指令碼將在DOM準備就緒之前執行。
當JavaScript在DOM準備就緒之前執行時，它無法獲取DOM的完整表示，這意味著大多數與DOM元素相關聯的變數將返回 null 。
以下是一個例子，如果 script 標籤的位置不正確，它將引發JavaScript中的“uncaught typeerror: cannot set property”錯誤：
<!DOCTYPE html> <html> <head> <title>Uncaught Typeerror Error Tutorial</title> <script src="app.js"></script> </head> <body> <h1 id="heading"></h1> </body> </html>
上述程式碼中， script 標籤放置在 head 標籤內。我們還有一個 id 為 heading 的 h1 元素。
接下來，我們將嘗試為 h1 元素分配文字值：
let heading = document.getElementById('heading');
heading.textContent = 'This is a heading';
//Uncaught TypeError: Cannot set properties of null (setting 'textContent')
儘管上面的程式碼看起來沒問題，但卻引發了“uncaught typeerror: cannot set property”錯誤。這是因為指令碼在DOM之前已經載入，所以我們的JavaScript沒有關於DOM元素的知識。
如果將 script 標籤放置在其他DOM元素之上，也會引發此錯誤：
<!DOCTYPE html> <html> <head> <title>Uncaught Typeerror Error Tutorial</title> </head> <body> <script src="app.js"></script> <h1 id="heading"></h1> </body> </html>
現在， script 標籤放置在 body 標籤中的DOM元素之上，但它仍會引發“uncaught typeerror: cannot set property”錯誤，因為指令碼在DOM之前載入。
要修復此錯誤，您需要將 script 標籤放置在關閉 body 標籤之前。這樣，所有的DOM元素都會在指令碼載入之前載入。
以下是一個正確放置的示例：
<!DOCTYPE html> <html> <head> <title>Uncaught Typeerror Error Tutorial</title> </head> <body> <h1 id="heading"></h1> <script src="app.js"></script> </body> </html>
let heading = document.getElementById('heading');
heading.textContent = 'This is a heading'
執行上述程式碼後， h1 元素的 textContent 將設定為“This is a heading”。不會出現錯誤。
拼寫錯誤
拼寫錯誤也是引發“uncaught typeerror: cannot set property”錯誤的另一個原因。
當您在JavaScript中拼錯用於標識DOM元素的屬性（ID或類）時，您引用了一個不存在的元素，它將返回一個 null 值。
試圖將值分配給 null 值會引發“uncaught typeerror: cannot set property”錯誤。
以下是一個幫助您理解的程式碼示例：
<!DOCTYPE html> <html> <head> <title>Uncaught Typeerror Error Tutorial</title> </head> <body> <h1 id="heading"></h1> <script src="app.js"></script> </body> </html>
let heading = document.getElementById('headin');
heading.textContent = 'Hello World!'
//Uncaught TypeError: Cannot set properties of null (setting 'textContent')
在上面的程式碼中，我們有一個帶有 id =” heading “的 h1 標籤。
在JavaScript程式碼中，我們使用錯誤的拼寫引用了id。我們寫的是”headin”，而不是”heading”。即，使用了 document.getElementById('headin'); 而不是 document.getElementById('heading');。
為了避免此類錯誤，始終確保正確引用DOM元素，使用正確的屬性且拼寫正確。
訪問未定義的DOM元素
在上一節中，我們看到引用拼錯的屬性會引發“uncaught typeerror: cannot set property”錯誤。當我們嘗試訪問一個不存在的DOM元素時情況也相同。
在下面的示例中，我們將嘗試訪問一個在標記中尚未定義的 id 屬性：
<!DOCTYPE html> <html> <head> <title>Uncaught Typeerror Error Tutorial</title> </head> <body> <h1></h1> <script src="app.js"></script> </body> </html>
let heading = document.getElementById('headin');
heading.textContent = 'Hello World!'
//Uncaught TypeError: Cannot set properties of null (setting 'textContent')
從上面可以看出，我們試圖設定一個不存在的DOM元素的 textContent。在我們的HTML程式碼中沒有任何一個 id 為“heading”的元素，因此會返回一個 null 值。
如果繼續將 heading 變數記錄到控制檯，你將得到一個 null 值。
如何確定變數是“null”還是“undefined”
到目前為止，你已經理解了將值分配給一個 null 或 undefined 的變數很可能會引發“uncaught typeerror: cannot set property”錯誤。
但是，你可以確定一個變數是 null 還是 undefined ；在與它們互動之前。儘管這不能修復錯誤，但它可以解釋為什麼功能不能正常工作。
在討論如何確定變數在JavaScript中是 null 還是 undefined 之前，瞭解 null 值和 undefined 值之間的區別很重要。
當給變數分配一個空值或未知值時，該變數是 null 。本教程的前幾節示例展示了 null 變數的實際示例。
另一方面，當沒有給變數分配值時，該變數是 undefined ：
let age; console.log(age); // undefined
在上面的程式碼中，宣告瞭 age 變數，但沒有給它賦值。當將其記錄到控制檯時，返回的是 undefined 。
既然你知道了 null 和 undefined 之間的區別，讓我們來看看如何確定一個變數是其中之一。
你可以使用寬鬆相等運算子（ == ）來確定一個變數是 null 還是 undefined。下面是一個示例：
<!DOCTYPE html> <html> <head> <title>Uncaught Typeerror Error Tutorial</title> </head> <body> <h1 id="headin"></h1> <script src="app.js"></script> </body> </html>
let heading = document.getElementById('headin');
if (heading == null) {
console.log('Variable is null - cannot assign value to a null variable');
} else {
heading.textContent = 'Hello World!';
}
在上述程式碼中，在JavaScript中引用DOM元素時我們拼寫錯誤。
使用if語句，我們檢查了 heading 變數的值是否為 null： if (heading == null) {...}
由於返回了 null 值，將在控制檯中記錄“Variable is null – cannot assign value to a null variable”。如果我們沒有得到 null 值，那麼將執行 else 塊中的程式碼。
如果你想知道為什麼我們沒有在 if 語句中包括 undefined ，這是因為在JavaScript中 null == undefined ，所以 if 語句中的程式碼會同時檢查這兩種錯誤。
小結
錯誤訊息在某些情況下可能會令人困惑，但它們幫助開發人員找出程式碼為什麼無法正常工作，並進行修復，以避免將來出現類似的錯誤。
雖然沒有人喜歡錯誤，但它們是幫助你更好地理解自己喜歡的程式語言的好方法。
此外，修復編碼錯誤可以在遇到類似錯誤時為你提供更多上下文，無論是在不同專案中還是在使用JavaScript框架和庫時都可能會遇到本文討論的錯誤。
評論留言