Javascript - How to get element that was clicked

Question

I'm making a really simple photo gallery with thumbnails and I have a working code which changes the big image when a thumbnail is clicked. Now what I need is to add a green border to the thumbnail which is currently active.

HTML:

<div id="gallery">
    <div id="big">
        <img align="center" src="big/pipe_big.jpg" alt="" id="image" />
    </div>
    <div id="small">
        <img onclick="changeImage('pipe')" src="small/pipe_small.jpg" alt="" />
        <img onclick="changeImage('leaves')" src="small/leaves_small.jpg" alt="" />
        <img onclick="changeImage('orange')" src="small/orange_small.jpg" alt="" />
        <img onclick="changeImage('xuangong')" src="small/xuangong_small.jpg" alt="" />
    </div>
    <div id="small">
        <img onclick="changeImage('grave')" src="small/grave_small.jpg" alt="" />
        <img onclick="changeImage('lotus')" src="small/lotus_small.jpg" alt="" />
        <img onclick="changeImage('tibet_girl')" src="small/tibet_girl_small.jpg" alt="" />
        <img onclick="changeImage('girl_water')" src="small/girl_water_small.jpg" alt="" />
    </div>
</div>

JS:

function changeImage(x){
    var image = document.getElementById('image');
    var active_image = ??????????

    if (x == 'pipe') {
        image.src = 'big/pipe_big.jpg';
    } else if (x == 'leaves') {
        image.src = 'big/leaves_big.jpg';
    } else if (x == 'orange') {
        image.src = 'big/orange_big.jpg';
    } else if (x == 'xuangong') {
        image.src = 'big/xuangong_big.jpg';
    } else if (x == 'grave') {
        image.src = 'big/grave_big.jpg';
    } else if (x == 'lotus') {
        image.src = 'big/lotus_big.jpg';
    } else if (x == 'tibet_girl') {
        image.src = 'big/tibet_girl_big.jpg';
    } else if (x == 'girl_water') {
        image.src = 'big/girl_water_big.jpg';
    }
    active_image.style.border = '2px solid green';
}

So I need to find the element that triggered the function and put it into variable "active_image" so that the function "changeImage()" always changes the border to 2px solid green. And please no jQuery solutions, I need it to be JavaScript.

Answer 1

Just change the function calls to include 'this' as the second parameter:

<div id="gallery">
<div id="big">
    <img align="center" src="big/pipe_big.jpg" alt="" id="image" />
</div>
<div id="small">
    <img id="img1" onclick="changeImage('pipe',this)" src="small/pipe_small.jpg" alt="" />
    <img id="img2" onclick="changeImage('leaves',this)" src="small/leaves_small.jpg" alt="" />
    <img id="img3" onclick="changeImage('orange',this)" src="small/orange_small.jpg" alt="" />
    <img id="img4" onclick="changeImage('xuangong',this)" src="small/xuangong_small.jpg" alt="" />
</div>
<div id="small">
    <img id="img5" onclick="changeImage('grave',this)" src="small/grave_small.jpg" alt="" />
    <img id="img6" onclick="changeImage('lotus',this)" src="small/lotus_small.jpg" alt="" />
    <img id="img7" onclick="changeImage('tibet_girl',this)" src="small/tibet_girl_small.jpg" alt="" />
    <img id="img8" onclick="changeImage('girl_water',this)" src="small/girl_water_small.jpg" alt="" />
</div>

And the dom element will be available in the function. So your function becomes:

var active_element_id;
function changeImage(x,element){
    var image = document.getElementById('image');
    var active_image = element.src;

    if (x == 'pipe') {
        image.src = 'big/pipe_big.jpg';
    } else if (x == 'leaves') {
        image.src = 'big/leaves_big.jpg';
    } else if (x == 'orange') {
        image.src = 'big/orange_big.jpg';
    } else if (x == 'xuangong') {
        image.src = 'big/xuangong_big.jpg';
    } else if (x == 'grave') {
    image.src = 'big/grave_big.jpg';
    } else if (x == 'lotus') {
        image.src = 'big/lotus_big.jpg';
    } else if (x == 'tibet_girl') {
        image.src = 'big/tibet_girl_big.jpg';
    } else if (x == 'girl_water') {
        image.src = 'big/girl_water_big.jpg';
    }
    if(active_element_id){
        var active_element = document.getElementById(active_element_id);
        active_element.style.border = '0px solid green';
    }
    element.style.border = '2px solid green';
    active_element_id = element.getAttribute('id');
}

Answer 2

You can add a green border to the element which is currently being hovered over, by using onmouseover and onmouseout as well as this.style.borderColor to change the color:

<img onmouseover="this.style.borderColor='green'" onmouseout="this.style.borderColor='black'" onclick="changeImage('pipe')" src="small/pipe_small.jpg" alt="" />

Working Example:

 div { border-style: solid; border-width: medium; border-color: black; width: 100px; height: 100px; } 

 <div onmouseover="this.style.borderColor='green'" onmouseout="this.style.borderColor='black'"></div><br> <div onmouseover="this.style.borderColor='green'" onmouseout="this.style.borderColor='black'"></div><br><div onmouseover="this.style.borderColor='green'" onmouseout="this.style.borderColor='black'"></div><br><div onmouseover="this.style.borderColor='green'" onmouseout="this.style.borderColor='black'"></div><br><div onmouseover="this.style.borderColor='green'" onmouseout="this.style.borderColor='black'"></div><br><div onmouseover="this.style.borderColor='green'" onmouseout="this.style.borderColor='black'"></div><br><div onmouseover="this.style.borderColor='green'" onmouseout="this.style.borderColor='black'"></div><br> 

Answer 3

Are you looking for this?

var images = document.querySelectorAll( "#gallery img" );
for( i =0; i< images.length; i++ ) {
    images[i].style.border = "0px";
}
var active_image = event.target;

Answer 4

Plunkr Example

The way with least changes to your code:

function changeImage(x){
    var active_image = this;
    var image = document.getElementById('image');

    var images = [],
        containers = document.getElementsByClassName('small');
    for (var i=0,n=containers.length; i < n; i++){
       var imgs = containers[i].getElementsByTagName('img');
       for (var j=0,m=imgs.length; j < m; j++ ){
         images = images.concat(imgs[j]);
       }
    }

    if (x == 'pipe') {
        image.src = 'big/pipe_big.jpg';
    } else if (x == 'leaves') {
        image.src = 'big/leaves_big.jpg';
    } else if (x == 'orange') {
        image.src = 'big/orange_big.jpg';
    } else if (x == 'xuangong') {
        image.src = 'big/xuangong_big.jpg';
    } else if (x == 'grave') {
        image.src = 'big/grave_big.jpg';
    } else if (x == 'lotus') {
        image.src = 'big/lotus_big.jpg';
    } else if (x == 'tibet_girl') {
        image.src = 'big/tibet_girl_big.jpg';
    } else if (x == 'girl_water') {
        image.src = 'big/girl_water_big.jpg';
    }
    // reset border
    for (var i=0,n=images.length;i<n;i++){
      images[i].style.border = '0px solid green';
    }
    // set active border
    active_image.style.border = '2px solid green';
}

Note you cannot have two elements with the same ID (eg, small ), so you must use a class, or change the ID to a unique name.

Also see that if you use the call() method, you can pass along what this is. In this case, it's important because you want to pass along the element that is being clicked. So for onclick="<function name>.call(this)" , the this is that element.

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <div id="gallery">
    <div id="big">
        <img align="center" src="big/pipe_big.jpg" alt="" id="image" />
    </div>
    <div class="small">
        <img onclick="changeImage.call(this,'pipe')"       src="small/pipe_small.jpg" alt="" />
        <img onclick="changeImage.call(this,'leaves')"     src="small/leaves_small.jpg" alt="" />
        <img onclick="changeImage.call(this,'orange')"     src="small/orange_small.jpg" alt="" />
        <img onclick="changeImage.call(this,'xuangong')"   src="small/xuangong_small.jpg" alt="" />
    </div>
    <div class="small">
        <img onclick="changeImage.call(this,'grave')"      src="small/grave_small.jpg" alt="" />
        <img onclick="changeImage.call(this,'lotus')"      src="small/lotus_small.jpg" alt="" />
        <img onclick="changeImage.call(this,'tibet_girl')" src="small/tibet_girl_small.jpg" alt="" />
        <img onclick="changeImage.call(this,'girl_water')" src="small/girl_water_small.jpg" alt="" />
    </div>
</div>
  </body>

</html>

Big Note

There is much more you could do to your code to make it more scalable and efficient, this is only a starter answer, without confusing you too much. Please keep at, keep learning and expanding your knowledge.

Answer 5

You can use this inside an event handler to get the element. However, since you use inline event handlers, inside changeImage , this will be another value (you could still pass it using call , apply , or as an argument).

However, better avoid inline event listeners:

 var image = document.getElementById('image'), images = document.getElementById('small').getElementsByTagName('img'); for(var i=0; i<images.length; ++i) images[i].addEventListener('click', changeImage); function changeImage(){ var x = this.getAttribute('data-img'); image.src = 'big/' + x + '_big.jpg'; this.style.border = '2px solid green'; } 

 <div id="gallery"> <div id="big"> <img align="center" src="big/pipe_big.jpg" alt="" id="image" /> </div> <div id="small"> <img data-img="pipe" src="small/pipe_small.jpg" alt="" /> <img data-img="leaves" src="small/leaves_small.jpg" alt="" /> <img data-img="orange" src="small/orange_small.jpg" alt="" /> <img data-img="xuangong" src="small/xuangong_small.jpg" alt="" /> <img data-img="grave" src="small/grave_small.jpg" alt="" /> <img data-img="lotus" src="small/lotus_small.jpg" alt="" /> <img data-img="tibet_girl" src="small/tibet_girl_small.jpg" alt="" /> <img data-img="girl_water" src="small/girl_water_small.jpg" alt="" /> </div> </div>