Javascript image source change addEventListener "click" event

Question

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>

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, Mar 01 '18 at 03:18
working great at [jsfiddle](https://jsfiddle.net/m1o974m6/2/) — guijob, Mar 01 '18 at 03:21
jsfiddle likely uses DOMContentLoaded or something similar to make sure the JS is executed after the DOM is ready. — jens, Mar 01 '18 at 03: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, Mar 01 '18 at 03:25

score 2 · Answer 1 · edited Mar 01 '18 at 03:26

2

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>

edited Mar 01 '18 at 03:26

Pablo

5,357
6
32
48

answered Mar 01 '18 at 03:21

jens

1,823
7
14

*"You can't attach event listeners before the DOM element is available."*. You certainly can by using [event delegation](https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation), which is how dynamically added elements are handled. – Spencer Wieczorek Mar 01 '18 at 04:35
Thanks a bunch everyone, all I had to do was move the script tag to the end of the body and the code runs just fine. Pablo is correct I was not thinking of when the code was being implemented. – Rgrunwald Mar 01 '18 at 23:24
Pablo simply made my answer into a code snippet, but I get what you mean. – jens Mar 02 '18 at 00:05

Javascript image source change addEventListener "click" event

1 Answers1