我想用类"box"为每个div元素添加一个事件监听器。:
<div class="gameBox">
<div class="msgs">
<p class="msg">Click in a box to play. Crosses start.</p>
</div>
<div class="gameTable">
<div class="box" id="0"></div>
<div class="box" id="1"></div>
<div class="box" id="2"></div>
<div class="box" id="3"></div>
<div class="box" id="4"></div>
<div class="box" id="5"></div>
<div class="box" id="6"></div>
<div class="box" id="7"></div>
<div class="box" id="8"></div>
</div>
<div class="reset">Reset</div>
</div>
let elementsArray = document.querySelectorAll(".box");
elementsArray.forEach(function(div) {
div.addEventListener("click", function() {
alert("AA");
});
});
这是我用来做这件事的JavaScript，但是它不返回任何东西。我认为问题可能是div元素在另一个div元素内，因为当我将其从程序的其余部分取出时，代码可以工作。请教我救赎之路。
看起来你的代码是正确的。您可以尝试的一件事是确保在将元素添加到页面后执行脚本。您可以将脚本放在<body>元素的末尾，就在结束的</body>标记之前。
下面是一个例子:
<body>
...
<div class="gameBox">
...
</div>
<script>
let elementsArray = document.querySelectorAll(".box");
elementsArray.forEach(function(div) {
div.addEventListener("click", function() {
alert("AA");
});
});
</script>
</body>
这确保具有box类的元素在脚本运行之前被添加到页面。
您可以尝试的另一件事是在代码中添加一条调试语句，以查看elementsArray变量是否确实填充了您期望的元素。可以通过添加console.log语句来实现，如下所示:
let elementsArray = document.querySelectorAll(".box");
console.log(elementsArray);
elementsArray.forEach(function(div) {
div.addEventListener("click", function() {
alert("AA");
});
});
这将把elementsArray变量打印到JavaScript控制台，您可以在web浏览器中访问该控制台。这将允许您验证elementsArray变量是否包含您期望的元素。
一种解决方案是向window对象添加事件侦听器，并检查所单击的元素是否为这些.box元素之一。
window.addEventListener("click", (e) => {
if (e.target.classList.contains("box")) {
console.log(e.target.id);
}
});