Question

我是一个初学者，我正在尝试做一些简单的事情，我只想能够单击一个div，当我单击时，我会看到我在控制台中单击的div的ID。我无法弄清楚代码出了什么问题。

因此，基本上，有一个div及其它3个div，我希望能够单击每个div，并根据我单击的那个，在控制台中收到良好的ID。

我尝试在onclick中添加另一个console.log，以查看我是否能够完全访问它，但什至没有出现。

“＃parties”是包含3个较小div的大div，而.partieind是赋予它们的类。

我也尝试过使用querySelectorAll，但还是没有。

contPartie = document.querySelector("#parties");

console.log("just before onclick");
contPartie.querySelectorAll(".partieind").onclick = () => {
    console.log("in onclick");
    console.log(this.id);
}

Answer 1

这里有两个问题：

您正在使用querySelectorAll。正如@ADyson的参考文章所指出的那样，querySelectorAll返回一个NodeList（一个类似于数组的结构），因此您不能在那里直接分配.onclick =。您必须遍历列表项并将其分别绑定，如下所示：

contPartie.querySelectorAll(".partieind").forEach(div => 
    div.onclick = () => {
      console.log("in onclick");
      console.log(this.id);
    }
}

此外，请注意此处的箭头功能/ this二分法：箭头功能缺少this绑定。您可以通过两种方式解决该问题：

1）用优良的ol'经典函数语法（自动绑定this）替换箭头函数语法：

contPartie.querySelectorAll(".partieind").forEach(div => 
    div.onclick = function() {
        console.log("in onclick");
        console.log(this.id);
    }
}

2）通过传递给处理程序的事件参数访问div：

contPartie.querySelectorAll(".partieind").forEach(div => 
    div.onclick = (e) => {
        console.log("in onclick");
        console.log(e.target.id);
    }
}

注意，我正在向函数中添加e参数，并使用e.target来获取被单击的div。

如何修复：document.querySelector（“”）。onclick（）无法正常工作

1 个答案: