我之前曾发布过有关此页面的信息，我正在尝试创建，但仍然遇到错误。我对此很陌生并且感到困惑。我需要使用 for 循环来遍历图像并为每个图像分配一个事件侦听器，以便在单击它们时将它们删除。我对差异变量感到困惑并将html拉入我的javascript。我不断收到“.addEventListener 不是一个函数”，所以我不断改变事情但迷路了。<!DOCTYPE html><html> <body> <div id = 'img'> <img src="https://www.sciencemag.org/sites/default/files/styles/article_main_large/public/dogs_16x9_0.jpg?itok=byPuhQjh" id="img"/> <img src="https://www.yvr.ca/-/media/yvr/blog/2018/57_yvr_puppies_2018.jpg" id="img"/></div> <script text="javascript"> let images = document.querySelectorAll("img"); for (let i = 0; i < images.length; i++){ images[i].addEventListener("click", () => { images[i].remove(); }); } </script> </body></html>
6 回答
饮歌长啸
TA贡献1951条经验 获得超3个赞
images.addEventListener应该是images[i].addEventListener。您希望将侦听器添加到数组中的特定图像，而不是数组本身。类似的问题images.remove()。
有只小跳蛙
TA贡献1824条经验 获得超8个赞
首先，您的容器和两个图像都有相同的 id - ID 应该是唯一的。其次，正如人们已经提到的，您不能将 eventListener 附加到对象数组。像这样的事情应该做：
let images = document.querySelectorAll("[id^='img']");
for (let i = 0; i < images.length; i++){
images.forEach(i=>{i.addEventListener("click", () => {
i.remove();
});
});
}
<div id = 'box'>
<img src="https://www.sciencemag.org/sites/default/files/styles/article_main_large/public/dogs_16x9_0.jpg?itok=byPuhQjh" id="img1"/>
<img src="https://www.yvr.ca/-/media/yvr/blog/2018/57_yvr_puppies_2018.jpg" id="img2"/>
</div>
森栏
TA贡献1810条经验 获得超5个赞
这将对您有所帮助 - https://jsfiddle.net/n5mk9Lzj/
let images = document.querySelectorAll("img");
for (let i = 0; i < images.length; i++) {
images[i].addEventListener("click", function() {
images[i].remove();
});
}
ABOUTYOU
TA贡献1812条经验 获得超5个赞
您不能将事件处理程序附加到图像列表
所以循环图像并为它们中的每一个
// for each image in images
image.onclick = function (e) {
e.target.parentNode.removeChild(e.target);
BIG阳
TA贡献1859条经验 获得超6个赞
您需要更新代码，您没有在循环内使用索引。您不能将任何侦听器直接添加到图像数组。
<!DOCTYPE html>
<html>
<body>
<div id = 'img'>
<img src="https://www.sciencemag.org/sites/default/files/styles/article_main_large/public/dogs_16x9_0.jpg?itok=byPuhQjh" id="img"/>
<img src="https://www.yvr.ca/-/media/yvr/blog/2018/57_yvr_puppies_2018.jpg" id="img"/>
</div>
<script text="javascript">
let images = document.querySelectorAll("img");
for (let i = 0; i < images.length; i++){
images[i].addEventListener("click", () => {
images[i].remove();
});
}
</script>
</body>
</html>
添加回答
举报
0/150
提交
取消