Javascript检查未定义的问题

Question

下面的代码在控制台中抛出一条错误消息，我不明白这个逻辑，因为在我的代码中，你可以看到我已经编写了if语句，应首先检查对象是否存在。

if (typeof document.getElementById("trbrok0").checked != "undefined") document.getElementById("trbrok0").checked = false;
if (typeof document.getElementById("trbrok1").checked != "undefined") document.getElementById("trbrok1").checked = false;
if (typeof document.getElementById("trbrok2").checked != "undefined") document.getElementById("trbrok2").checked = false;
if (typeof document.getElementById("trbrok3").checked != "undefined") document.getElementById("trbrok3").checked = false;

就像你可以看到我们应该首先检查对象是否存在，然后尝试更改对象中“checked”属性的值。但我总是收到以下错误消息：

Uncaught TypeError: Cannot read property 'checked' of null

Answer 1

因为document.getElementById("trbrok0")返回一个DOM节点，如果它不存在，则返回null。 null没有属性checked所以document.getElementById("trbrok0").checked抛出错误。

解决方案是添加一个检查节点是否首先存在于if(document.getElementById("trbrok0")!= null){ }

Answer 2

看一看

function checkNullAndSetVal(id, val) {
  if (document.getElementById(id) == null) {
    console.log(id + ", Null or Undefined");
    return;
  }

  document.getElementById(id)["checked"] = val;
  console.log("Successfully Updated: ", id);
}

checkNullAndSetVal("trbrok0", false);
checkNullAndSetVal("trbrok1", true);
checkNullAndSetVal("trbrok2", false);
checkNullAndSetVal("trbrok3", true);

<input id="trbrok2" type="checkbox" name="trbrok" value="2">
<input id="trbrok3" type="checkbox" name="trbrok" value="3">

说明：

1. 如果用double等于（==）检查null，则检查null和undefined
2. 使用函数来减少代码的重复。
3. 使用方括号语法在对象中创建非现有属性。例如obj [“newProperty”] =“一些价值”;

Answer 3

当你检查checked的类型时，document.getElementById选择的元素不存在，这就是原因：

Cannot read property 'checked' of null

因为null没有名为checked的财产。