Javascript图像源更改addEventListener“；点击"；事件

尝试使用JavaScript将图像源从images/small/更改为images/medium/

我已经尝试了以下代码，但由于某些原因，单击事件没有被拾取，感谢您对此提供的任何帮助

Javascript

var thumbs = document.getElementById("thumbnails");

thumbs.addEventListener("click", function (i) {


    if (i.target.nodeName.toLowerCase() == "img") {
        // get image filename of clicked thumbnail
        var clickedImageSource = i.target.src;

        // replace the folder name of the image 
        var newSrc = clickedImageSource.replace("small","medium");


    }

});

HTML

---

在DOM元素可用之前，不能附加事件侦听器

//在dom就绪之前执行。
var thumbs=document.getElementById（“缩略图”）；
thumbs.addEventListener（“单击”，函数（i）{
console.log（'clicked'）；
});
//在dom就绪后执行。
var thumbs=document.getElementById（“缩略图”）；
thumbs.addEventListener（“单击”，函数（i）{
console.log（'clicked'）；
});

如果不考虑如何包含JS，很难说。这个问题往往是在DOM准备就绪之前调用JS的结果。如果在正文末尾添加脚本include，它应该能够将事件侦听器附加到

缩略图

div。在JSFIDLE上运行良好可能会使用DOMContentLoaded或类似的工具来确保在DOM就绪后执行JS。假设在DOM可用后加载脚本，它工作正常，您可以通过console.logging在单击之前和之后对变量进行验证。可能问题在于，您实际上想在哪里对新生成的路径执行一些可见的操作，例如刷新内容？“在DOM元素可用之前，您不能附加事件侦听器。”。您当然可以使用，这就是动态添加元素的处理方式。谢谢大家，我所要做的就是将脚本标记移到正文的末尾，代码就可以正常运行了。Pablo是对的，我没有想到代码是什么时候实现的。Pablo只是把我的答案写成了一个代码片段，但我明白你的意思。

<div id="thumbnails">
        <img src="images/small/Home.jpg" title="Home" />
        <img src="images/small/Office.jpg" title="Office" />
        <img src="images/small/Park.jpg" title="Park" />
        <img src="images/small/Hills.jpg" title="Hills" />
        <img src="images/small/HaveEyes.jpg" title="HaveEyes" />
    </div>