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.

" I need it to be JavaScript", then use JS and addEventListener, not HTML. — Teemu
– Teemu, Commented Mar 29, 2015 at 18:53
Would it not be easier to use a class and loop through it rather than the if/else if statement? Also onload events will slim back on your html...? — NewToJS
– NewToJS, Commented Mar 29, 2015 at 19:35
It will be a big change in your source code but it will remove the old border. This is why i'm asking before submitting the answer. — NewToJS
– NewToJS, Commented Mar 29, 2015 at 19:39

Balint Domokos · Accepted Answer · 2015-03-29 19:27:30Z

1

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;

edited Mar 29, 2015 at 19:27

answered Mar 29, 2015 at 19:05

Balint Domokos

1,0218 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

user1589375 Over a year ago

This worked for getting the green border after an image was clicked. I still need to remove that border if another image is clicked but I can't seem to figure out what I should do

user1589375 Over a year ago

I forgot to mention that the other thumbnails are getting a red 2px border when I put my mouse over them (img: hover{border:2px solid red}. But when the JS changes the style it removes the hover effect...

Balint Domokos Over a year ago

You can create a css class for the selected thumbnails, and add/remove that class in the event handler e.g. images[i].classList.remove('selected') or active_image.classList.add('selected')

user1589375 Over a year ago

Can't get it to work... I'm getting really frustrated with this. It's a school task and our teacher expects us to know how to make this kind of scripts even though he hasn't taught us Javascript at all...

Balint Domokos Over a year ago

Try something like this jsfiddle.net/bdomokos74/vLucuyob You need to find out these things yourself, there are a lot of resources out there..

|

Strucker · Accepted Answer · 2015-03-29 21:10:38Z

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'); }

It doesn't seem to work. No green border after I click on an image
Yeah just change 'active_image.style.border' to 'element.style.border'.
That worked! Now I just need to remove that border if another image is clicked. Currently it applies the border whenever an image is clicked but it stays there if another one is clicked. Thanks for helping me
The edited solution code should do what you're looking for. Give each image element an id and will save the id of the last image clicked. When you click an image it clears the border of the previous image clicked.
It does work, but only once. If I click on all of the images once, it won't give the hover effect anymore :/

A.J. Uppal · Accepted Answer · 2015-03-29 19:04:29Z

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>

I need the border when the element is clicked, not hovered over. I could do that with just CSS

Community · Accepted Answer · 2020-06-20 09:12:55Z

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 (e.g., 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.

Oriol · Accepted Answer · 2015-03-29 18:58:26Z

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>

Collectives™ on Stack Overflow

Javascript - How to get element that was clicked

5 Answers 5

6 Comments

5 Comments

1 Comment

Plunkr Example

Big Note

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

6 Comments

5 Comments

1 Comment

Big Note

Comments

Comments

Related