如何修复：document.querySelector（“”）。onclick（）不起作用

Question

我是一个初学者，我正在尝试做一些容易入手的事情，我只是想能够点击一个div，当我点击我将看到我在控制台中点击的div的ID。我无法弄清楚代码有什么问题。

所以基本上，还有一个带有3个其他div的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);
}

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。