Javascript 如何修复：document.querySelector（"；）.onclick（）不工作

我是一个初学者，我正在尝试做一些简单的开始，我只想能够点击一个div，当我点击时，我会看到我在控制台中点击的div的id。我想不出代码出了什么问题

所以基本上，有一个div和另外3个div，我希望能够单击其中的每一个，并根据我单击的是哪一个，在控制台中接收良好的id

我尝试在onclick中添加另一个console.log，以查看是否能够进入它，但即使这样也没有出现

“#parties”是包含3个较小div的大div，.partieind是指定给这些div的类

我也试过querySelectorAll，但还是没有

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

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

---

这里有两个问题：

您正在使用querySelectorAll。正如@ADyson引用的帖子所指出的，queryselectoral返回一个节点列表（一个数组结构），因此您不能直接在那里分配

。onclick=

。您必须循环浏览列表项并单独绑定它们，如下所示：

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

除此之外，请注意这里的arrow函数/

这个

二分法：arrow函数缺少

这个

绑定。您可以通过两种方式解决此问题：

1） 将箭头函数语法替换为良好的ol经典函数语法（自动绑定此）：

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

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

请注意，我正在将

e

参数添加到函数中，并使用

e.target

获取单击的div.

的可能副本

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