Question

JS 检查 getElementById 是否存在

2018-04-18

26636

javascript jquery

这是我课堂作业的一部分。这是一个小型 Web 应用程序。下面的代码部分是选择按钮（复选框）的函数。代码运行正常。

我的问题是控制台上出现此错误：

Uncaught TypeError: Cannot set property 'checked' of null
at selectGirls (indexj.js:163)
at HTMLAnchorElement.onclick (index.html:137)

我知道我出现此错误是因为，我并不是在每个页面上都有这些元素。澄清一下，我的意思是第 1 页有两个复选框，但第 2 页有 5 个复选框，就是这样。

我想在所有页面使用相同的 JS 文件。我的问题是如何尽可能避免这些控制台错误？我不想让它们从控制台隐藏作为解决方案。非常感谢您的意见。

function selectAllStudents() {
    unselectAllStudents();
    let boxes = $(".scores").toArray();
    document.getElementById('check_Terrilyn').checked = true;
    document.getElementById('check_Vinnie').checked = true;
    document.getElementById('check_Boren').checked = true;
    document.getElementById('check_Tempie').checked = true;
    document.getElementById('check_Mapes').checked = true;
    document.getElementById('check_Fletcher').checked = true;
    document.getElementById('check_Bovee').checked = true;
    document.getElementById('check_Figgs').checked = true;
}

Answer 1

最简单的方法是检查它们是否存在

if (document.getElementById('check_Terrilyn'))
  document.getElementById('check_Terrilyn').checked = true;

编辑

一种更现代的方法，并且考虑到复选框的数量未知，可以使用 querySelectorAll 。

它将返回一个元素列表（ NodeList ），例如，正如您的代码所建议的那样，所有复选框的 id 都以 check_ 开头，您可以像这样将它与属性选择器 :

var els = document.querySelectorAll('[id^="check_"]');
els.forEach(function (el) {
    el.checked = true;
});

<input id="check_0" type="checkbox" value="0">
<input id="check_1" type="checkbox" value="1">
<input id="check_2" type="checkbox" value="2">
<input id="check_3" type="checkbox" value="3">

Answer 2

使用 id 和 if 的方法

if (document.getElementById('check_Terrilyn')){
    document.getElementById('check_Terrilyn').checked = true;
}

使用 classes 的方法

//ES6
Array.from(document.getElementsByClassName('commonclass')).forEach(e => {
    e.checked = true;
});

Answer 3

我曾经这样做

if(document.getElementById('check_Terrilyn')!="null")
    document.getElementById('check_Terrilyn').checked=true;