jquery JS检查getElementById是否存在

2ic8powd  于 2022-12-12  发布在  jQuery
关注(0)|答案(9)|浏览(122)

这是我课堂作业的一部分。它是一个小的web应用程序。下面的代码部分是一个选择按钮(复选框)的函数。代码工作正常。
我的问题是我在控制台上收到此错误:
未捕获的类型错误:无法将属性"checked"设置为空
(163)第一次见面
(网址:http://www.http://www.http://http://http://www.http://www.http://www.http://www.http://www.http://www.http://www.http:///www.http:///www.http:///www.http:///www.http:///www.http:///www.http://///www.http:////www.http:////www.http:////www.http:////www.http:////www.http:////www.http:////www.http:////www.http:////www.http:////www.
我知道我得到这个错误是因为,我没有这些元素在每一页。为了澄清,我的意思是第一页有两个复选框,但第二页有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;
}
gr8qqesn

gr8qqesn1#

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

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

编辑

一个更现代的方法,并考虑到有一个未知数量的复选框,可以使用querySelectorAll
它将返回一个元素列表(NodeList),例如,正如您的代码所建议的,所有复选框的id都以check_开头,您可以将其与attribute selector一起使用,如下所示:
第一次

nhn9ugyo

nhn9ugyo2#

使用id和if方法

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

以类的方式接近

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

dddzy1tm3#

我过去常做

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

xxls0lw84#

你可以这样做:

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

elem && elem.checked = true;
xtupzzrd

xtupzzrd5#

如果你把它们都设置为选中状态,那么通过class选择它们并循环遍历它们,这样即使没有找到也不会有什么影响。
您似乎还在使用jQuery,因此代码可以简化为:

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

6uxekuva6#

因为您已经标记了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;
  }
});
dm7nw8vv

dm7nw8vv7#

我看到你已经在使用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);
}
woobm2wo

woobm2wo8#

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

gpnt7bae9#

如果你想检查元素是否存在,同时把它赋给一个变量(如果元素不存在,就把它设为'false'),这是可行的:

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

相关问题