如何修復未捕獲的TypeError

Question

以下代碼行導致未被捕獲的TypeError：

document.getElementById('leaveblank').className = "noshow";

我知道這是因為DOM中沒有#leaveblank ID（腳本在另一個頁面上使用）。 我也知道解決這個問題的方法可能是添加一個IF語句。

但是，我不確定這個語法應該是什么樣的，或者我是否需要先將getElement設置為var？

以下完整控制台錯誤供參考：

Uncaught TypeError: Cannot set property 'className' of null 

Answer 1

正如您引用的錯誤所暗示的那樣，如果找不到您提供的id的元素， document.getElementById()將返回null 。 所以：

var el = document.getElementById('leaveblank');
if (el != null)
    el.className = "noshow";

您可以將if條件簡化為：

if (el)

...因為如果找到一個元素，那么el將成為一個對象，所有對象都是“真實的”。

如果您正在使用jQuery（正如您標記問題所暗示的那樣），您不必擔心元素是否存在，您可以這樣做：

$("#leaveblank").attr("className", "noshow");
// or, if you just want to add the class to the element
$("#leaveblank").addClass("noshow");

$("#leaveblank")部分創建一個包含一個或零個元素的jQuery對象; 像.attr()或.addClass()這樣的jQuery方法對它們被調用的jQuery對象中的任何元素進行操作，如果沒有元素則沒有錯誤。

Answer 2

嘗試這個

var lb = document.getElementById('leaveblank');
if(lb)
 lb.className = "noshow";

Answer 3

使用jQuery將沒有錯誤，因為jQuery負責這個：

$('#leaveblank').attr('class', 'noshow');

純JS將是：

if (document.getElementById('leaveblank').length) {
    // code
}

Answer 4

我知道檢查元素是否實際存在的最佳方法是檢查其長度屬性，如下所示：

if (document.getElementById('leaveblank').length == 0)
{
    // Element does NOT exist in the DOM
}

Answer 5

是。 您應該始終在變量中獲取元素並檢查它是否為null，然后對其進行進一步操作。