为什么当我点击图像时它没有触发事件监听器？ (VanillaJS)

Question

我尝试制作一个脚本，可以收集我在网站上玩剪刀石头布的一些数据（https://www.rpsgame.org/）：

var h_choice = document.querySelectorAll(".play-page-gamer__choices")[0];
var h_rock = document.querySelectorAll(".play-page-gamer__choices")[0]
    .childNodes[1].childNodes[2];
var h_paper = document.querySelectorAll(".play-page-gamer__choices")[0]
    .childNodes[3].childNodes[2];
var h_scissors = document.querySelectorAll(".play-page-gamer__choices")[0]
    .childNodes[5].childNodes[2];

game = [];

h_rock.addEventListener("click", () => {
    console.log("rock");
});
h_paper.addEventListener("click", () => {
    console.log("paper");
});
h_scissors.addEventListener("click", () => {
    console.log("scissors");
});

顺便说一句，不是所有代码，但它是这个问题的重要部分，如果你想要全部代码，只需询问😁

所以我设置了事件，这样我就可以知道我通过使用事件做出什么选择，但当我单击图像时没有触发

当我单击图像时，如果我单击纸张但没有出现任何内容，我希望控制台中会出现一条消息，就像纸张一样 但是当我模拟这样的点击时 h_paper.click() 它在控制台中返回纸张 我什至验证 eventListener 是否未删除，但不是因为当我输入 h_paper.eventListeners 时，它在我的函数中返回一个数组，即：

() => {
    console.log('paper')
}

Answer 1

我找到了解决方案，因此当我单击图像时，我改为单击 div 标签作为父元素。就是这样了。 更新版本已开启：https://github.com/Ryn-Bghl/RPS_analysis/blob/main/scripts/csv_generator.js