Trying to use JavaScript to change the image source from images/small/ to images/medium/

I have tried the following code but for some reason the click event is not being picked up, thanks for any help with this.

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

<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>

Trying to use JavaScript to change the image source from images/small/ to images/medium/

I have tried the following code but for some reason the click event is not being picked up, thanks for any help with this.

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

<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>

• javascript
• addeventlistener

• Hard to say without looking at how you are including the JS. This issue tends to be a result of the JS being called before the DOM is ready. If you add the script include at the end of the body it should be able to attach the event listener to the thumbnails div. – jens Commented Mar 1, 2018 at 3:18
• working great at jsfiddle – guijob Commented Mar 1, 2018 at 3:21
• jsfiddle likely uses DOMContentLoaded or something similar to make sure the JS is executed after the DOM is ready. – jens Commented Mar 1, 2018 at 3:22
• Assuming you load the script after DOM is available, it works just fine, which you can verify by console.logging your variables before and after the click. Maybe the problem is where you actually want to do something visible with the newly generated paths, as in refreshing your content? – Stacking For Heap Commented Mar 1, 2018 at 3:25

1 Answer 1

You can't attach event listeners before the DOM element is available.

<script>
  // executed before dom is ready.
  var thumbs = document.getElementById("thumbnails");

  thumbs.addEventListener("click", function(i) {
    console.log('clicked');
  });
</script>
<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>
<script>
  // executed after dom is ready.
  var thumbs = document.getElementById("thumbnails");

  thumbs.addEventListener("click", function(i) {
    console.log('clicked');
  });
</script>