Question

我是JS的新手，这是我的一个类项目。

我有一些带有内联onclick的按钮，用于选择一些复选框。

进一步澄清：

第1页有一个名为1的按钮。第2页有一个名为2的按钮.Page 3有两个按钮1和2

然后我尝试使用Jquery和此代码摆脱内联onclick。这是我用于按钮1和按钮2的代码。

var btn = document.querySelector("button.buttona-1");
btn.addEventListener("click", selectArts);
function selectArts() {
    unselectAll();
    let boxes = $(".scores").toArray();
    $('#ch_1, #ch_2').prop('checked', !0)
}


var btn = document.querySelector("button.buttonb-2");
btn.addEventListener("click", selectBusiness);
function selectBusiness() {
    unselectAll();
    let boxes = $(".scores").toArray();
    $('#ch_3, #ch_4').prop('checked', !0)
}

问题是我收到第1页和第2页的控制台错误，因为并非所有按钮都存在。

只有第3页工作正常，因为它有两个按钮。

我该如何解决这个问题？任何建议将不胜感激。

Answer 1

您直接将DOM用于点击处理程序。如果您使用的是jQuery，那么您就不会遇到问题，请参阅*** comments：

$("button.buttona-1").on("click", selectArts);     // ***
function selectArts() {
    unselectAll();
    let boxes = $(".scores").toArray();
    $('#ch_1, #ch_2').prop('checked', !0)
}


$("button.buttonb-2").on("click", selectBusiness); // ***
function selectBusiness() {
    unselectAll();
    let boxes = $(".scores").toArray();
    $('#ch_3, #ch_4').prop('checked', !0)
}

有效的原因是jQuery是基于集合的。这个集合可能是空的很好，你仍然可以对集合进行操作（它们只是“无操作” - 例如，它们什么都不做）。使用原始代码时，您尝试在addEventListener上调用null，因为querySelector如果找不到匹配的元素（DOM未设置），则返回null为基础）。

当然，如果您出于某种原因不想使用jQuery，那么您只需添加一个警卫：

var btn;

btn = document.querySelector("button.buttona-1");
if (btn) {                                         // ***
    btn.addEventListener("click", selectArts);
}
function selectArts() {
    unselectAll();
    let boxes = $(".scores").toArray();
    $('#ch_1, #ch_2').prop('checked', !0)
}

btn = document.querySelector("button.buttonb-2");
if (btn) {                                         // ***
    btn.addEventListener("click", selectArts);
}
function selectBusiness() {
    unselectAll();
    let boxes = $(".scores").toArray();
    $('#ch_3, #ch_4').prop('checked', !0)
}

Answer 2

为了防止错误，您需要先检查元素是否存在，然后才能将click事件处理程序实际分配给元素。通过与null或undefined

进行比较，更改代码以检查元素是否存在

var btn = document.querySelector("button.buttona-1");
if (btn)
{
   btn.addEventListener("click", selectArts);
}
function selectArts() {
    unselectAll();
    let boxes = $(".scores").toArray();
    $('#ch_1, #ch_2').prop('checked', !0)
}

var btn = document.querySelector("button.buttonb-2");
if (btn)
{
  btn.addEventListener("click", selectBusiness);
}
function selectBusiness() {
    unselectAll();
    let boxes = $(".scores").toArray();
}

Answer 3

在添加事件侦听器之前，您可以检查DOM元素是否为null。

if(btn){
   //your code
}

即使某些元素不存在，Jquery也会使侦听器工作

3 个答案: