使用单独的onclick事件修改onclick

Question

I have three clickable images. One image on the first row, two images on the second row. The image on the first row is a reflection of whichever image on the second row was last clicked. I can make the image on the second row modify the src of the image on the first row, but am having difficulty modifying the onclick parameter of the anchor tag. I can't just change the href of the first image, it has to actually mimic the clicking of the second row image. Here's my code, along with by a jsfiddle of it:

https://jsfiddle.net/2hgzmnmb/

<a onclick="document.getElementById('image1').click();" id="previewLink"><img id="previewImage" src="http://i.imgur.com/UevhwuA.png"></a>

<br><br> 

<a id="image1" onclick="document.getElementById('previewImage').src='http://i.imgur.com/UevhwuA.png';alert('1')"><img src="http://i.imgur.com/UevhwuA.png"></a>

<a id="image2" onclick="document.getElementById('previewImage').src='http://i.imgur.com/121fy0E.png';alert('2')"><img src="http://i.imgur.com/121fy0E.png"></a>

I want to add the following: document.getElementById('previewLink').onclick='document.getElementById('image1').click();' to the onclick parameter for the first image on the bottom row, and: document.getElementById('previewLink').onclick='document.getElementById('image2').click();' to the second image on the bottom row, so the image on the first row will not only look like whichever image was last clicked on the second row, but will also mimic the actual click. Right now, obviously from the code, it will only mimic clicking the first image on the second row, no matter what image was last clicked, and I'm thinking it's because my syntax isnt correct when I try to modify the onclick property of the anchor tag for the image on the first row.

I also tried doing this with variables but got a bit tied in knots. Any ideas on how I could go about doing this? I'm close, just not there yet.

Thanks!

Answer 1

I'd remove the inline handlers and use addEventListener() instead - except for demo purposes I've left your alert() messages in the inline onclick attributes to simulate the click behaviour that you want clicks on the preview image to mimic.

By putting the logic into JS in a <script> element you'll find it much easier to maintain because you can format the code in a readable manner.

Then simply use a variable to keep track of what the currently selected image is:

 // the following JS should be in a script element at the end of the body // and/or wrapped in a window onload handler function imageClick(e) { currentImage = e.currentTarget; document.getElementById("previewImage").src = currentImage.querySelector("img").src; } var images = document.querySelectorAll(".image"); for (var i = 0; i < images.length; i++) { images[i].addEventListener("click", imageClick); } var currentImage = images[0]; // default to first image document.getElementById('previewLink').addEventListener("click", function() { currentImage.click(); }); 

 <a id="previewLink"><img id="previewImage" src="http://i.imgur.com/UevhwuA.png"></a> <br><br> <a id="image1" class="image" onclick="alert('1')"><img src="http://i.imgur.com/UevhwuA.png"></a> <a id="image2" class="image" onclick="alert('2')"><img src="http://i.imgur.com/121fy0E.png"></a> 

Note also that I added a class to your lower images in order to make it easy to process them in a loop to add their click handler. This is optional, you could select by id instead with .querySelectorAll("#image1,#image2") .

Answer 2

add the line below to each anchor tag in the second row

document.getElementById('previewLink').related_id=this.id

 <a onclick="if(document.getElementById(this.related_id)!=null){document.getElementById(this.related_id).click()};" id="previewLink"><img id="previewImage" src="http://i.imgur.com/UevhwuA.png"></a> <br><br> <a id="image1" onclick="this.related_id=this.id;document.getElementById('previewImage').src='http://i.imgur.com/UevhwuA.png';alert('1');document.getElementById('previewLink').related_id=this.id"><img src="http://i.imgur.com/UevhwuA.png"></a> <a id="image2" onclick="this.related_id=this.id;document.getElementById('previewImage').src='http://i.imgur.com/121fy0E.png';document.getElementById('previewLink').related_id=this.id;alert('2')"><img src="http://i.imgur.com/121fy0E.png"></a> 

Answer 3

Fiddle: https://jsfiddle.net/2hgzmnmb/1/

this: document.getElementById('previewLink').onclick='document.getElementById('image1').click();' should be: document.getElementById('previewLink').onclick=this.onclick

because onclick attribute is actually running a JS code, so if you pass a string there, it will interpret it as just a string.

onclick='document.getElementById('image1').click();' is the same as the string "document.getElementById('image1').click();" , it does nothing.