无法读取未定义的属性长度

Question

我试图简单地检查我是否有一个空的输入文本框，但当我在 Chrome 中运行此命令时出现此错误：

未捕获类型错误：无法读取未定义的属性“长度”。

以下是我的做法。我检查 DOM 准备情况，然后调用该函数：

function walkmydog() {
    //when the user starts entering                                                                                                                                                
    if(document.getElementById('WallSearch').value.length == 0) {
        alert("nothing");
    }
}

if (document.addEventListener) {
    document.addEventListener("DOMContentLoaded", walkmydog, false);
}

Answer 1

输入的 id 似乎不是 WallSearch。也许您混淆了 name 和 id。它们是两个不同的属性。 name 用于定义发布值的名称，而 id 是 DOM 内元素的唯一标识。

另一种可能性是您有两个具有相同 id 的元素。浏览器将选择其中任何一个（可能是最后一个，也可能是第一个）并返回一个不支持 value 属性的元素。

Answer 2

也许，你可以先确定 DOM 是否真的存在，

function walkmydog() {
    //when the user starts entering
    var dom = document.getElementById('WallSearch');
    if(dom == null){
        alert('sorry, WallSearch DOM cannot be found');
        return false;    
    }

    if(dom.value.length == 0){
        alert("nothing");
    }
}

if (document.addEventListener){
    document.addEventListener("DOMContentLoaded", walkmydog, false);
}

Answer 3

我只是想针对这个问题提出另一个简单的解决方案。

if(dom?.length !== 0){
// Referred to as optional chaining 
// this checks if the array is empty or if a value exists 
}