Display Image from Gallery On Click using Javascript

Question

I am trying to learn Javascript and I would like to write a script that allows the user the click an image in a gallery, (the images happen to be otters), and have that image focused on in the center of the page. My goal was for the script to loop through every image on the page and ascribe each image a function such that the source for the focused image changes to the source of the clicked image on user click. I have been unsuccessful.

My relevant html code is:

      <div class="gallery">
        <img src= "otter1.png")/>
        <img src= "otter2.png")/>
        <img src= "otter3.png")/>
        <img src= "otter4.png")/>
        <img src= "otter5.png")/>
        <img src= "otter6.png")/>
      </div>

    <div class="focus">
      <img id="focus" src="otter1.png">
    </div>

relevant CSS code:

.gallery {
    margin: 5px;
    border: 1px solid #ccc;
    float: left;
    width: 180px;
}

.gallery img:hover {
    border: 1px solid #777;

}


.gallery img {
    width: 100%;
    height: auto;
}

.focus {
  position: fixed;
  text-align: center;
  vertical-align: center;
  margin-left: 50px;
  margin-top: 100px;
  border: 4px solid white;
}

And most importantly the javascript:

window.onload = function() {
    var imgs = document.getElementsByTagName('img');
    for(var i = 0; i < imgs.length; i++) {
        var img = imgs[i];
        img.onclick = function() {
            newSrc = img.getAttribute('src'); /* problem line ?*/
            focus = document.getElementById('focus');
            focus.src = 'newSrc';
        }
    }
}

What is going wrong in my function (if the problem is only the function), and how can I get it to work? I tried logging the function activity in the console, but am still confused as to what exactly is happening.

I tried looking to: How do you set a JavaScript onclick event to a class with css and http://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_lightbulb but was unable to properly apply either of the methods.

Apologies if this is unclear or too long, this is my first post.

Answer 1

The real problem is that your temporary img will always contain the last image by the time onclick is fired, because anonymous functions (what you used to handle onclick ) don't grab variables in real-time, they grab variables when they are invoked.

You can use a this keyword within onclick events to grab the current image:

window.onload = function() {
    var imgs = document.getElementsByTagName('img');
    for(var i = 0; i < imgs.length; i++) {
        var img = imgs[i];
        img.onclick = function() {
            newSrc = this.src; //this = reference to image that fired onclick
            focus = document.getElementById('focus');
            focus.src = newSrc; //no quotes for variable references!
        }
    }
}

Hope this helps!

Answer 2

You can code this way:

window.onload = function() {
    document.getElementsByTagName('img').forEach(function(){
        this.onclick = function() {
            document.getElementById('focus').src = this.src;
        }
    });
}

I think the code is intuitive, but feel free to ask ;)