JS 检查 getElementById 是否存在

Question

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

我的问题是我在控制台上收到此错误：

未捕获的类型错误：无法将属性“已检查”设置为 null
在 selectGirls (indexj.js:163)
在 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 。

它将返回元素的数组，例如，和你的代码提示，所有checkeboxes的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;
}

课堂教学

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

Answer 3

你可以这样做：

let elm = document.getElementById('check_Terrilyn');

elem && elem.checked = true;

Answer 4

我用来做

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

Answer 5

我看到您已经在使用 jQuery。 为什么不完全使用它，并停止使用getElementById ？

只需执行$( ... ).prop('checked',true) 。 jQuery 将处理找不到元素的情况。

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

Answer 6

如果您将它们全部设置为选中状态，则按class选择它们并循环遍历它们。 这样就算找不到也没关系。

您似乎也在使用 jQuery，因此可以将代码简化为：

function selectAllStudents() {
  unselectAllStudents();
  let boxes = $(".scores").toArray();
  $('.checkbox').prop('checked', true);
}

Answer 7

既然你已经标记了 jquery，那么使用prop

function selectAllStudents() {
    unselectAllStudents();
    let boxes = $(".scores").toArray();
    $('#check_Terrilyn').prop( "checked", true );
    //for the rest of them
}

或者创建一个 id 数组，您可以在设置其checked属性之前迭代并检查它们是否存在

var array = ['check_Terrilyn', 'check_Vinnie']; //add more ids as required
array.forEach( s => $("#"+s).prop( "checked", true ) );

或者使用普通的 js

var array = ['check_Terrilyn', 'check_Vinnie']; //add more ids as required
var fnGetEl = (id) => document.getElemetById(id);
array.forEach( s => {
  var el = fnGetEl(s);
  if(el)
  {
    el.checked = true;
  }
});

Answer 8

if(document.getElementById("id_selector2teller")){
alert("id_selector2teller exists");
}else{
alert("id_selector2teller not available");
}

Answer 9

如果您想检查元素是否存在并同时将其分配给变量（如果元素不存在，则将其设置为“false”），这将起作用：

var check_Terrilyn = document.getElementById('check_Terrilyn') ?
                     document.getElementById('check_Terrilyn').checked : false;