0

How can add onclick event to multiple images that is assigned to a function with an argument?

I have this element <img class="image" src=""> I did this to add onclick event without using html onclick attribute document.getElementsByClassName("image")[0].onclick=changeimage; but I cannot pass argument using this I have to do this to pass argument and enable onclick to first image document.getElementsByClassName("image)[0].onclick=function(evt){ changeImage(0); } changeImage(para){ document.getElementsByClassName("image")[para].src="someimage"; } But I have 100 of image and to add event to all I have to repeat this code again and again. Is there any better way without using html onclick attribute? Any good way add onclick event to 100s of images dynamically?

6th Sep 2018, 8:27 AM
Prathamesh Sawant
Prathamesh Sawant - avatar
6 Answers
+ 5
Loop your images const img = document.getElementsByClassName(”image”); for(var a = 0; a < img.length; a++) { img[a].addEventListener(”click”, function(el) { changeImage(el) }, false) } function changeImage(el) { el = el.target; el.setAttribute(”src”, ”someimage”); } untested
6th Sep 2018, 9:01 AM
Toni Isotalo
Toni Isotalo - avatar
+ 2
Loop your images var images = document.getElementsByClassName("image"); for(var i=0;i<images.length;i++) { images[i].addEventListener("click", imgClick.bind(images[i]), false); } } function imgClick() { this.style.border = "2px solid red"; // set image frame } // tested okay
6th Sep 2018, 10:15 AM
Calviղ
Calviղ - avatar
+ 2
To pass arguments, just set them in arguments of bind function, first is reserved for the point object, "this" or any other object pointers, second onwards are for passing arguments. The following example would display different Image numbers on each images. e.g. var images = document.getElementsByClassName("image"); for(var i=0;i<images.length;i++) { images[i].addEventListener("click", imgClick.bind(images[i], i), false); } } function imgClick(num) { this.style.border = "2px solid red"; // set image frame this.innerText = "Image " + (num+1); }
7th Sep 2018, 3:13 PM
Calviղ
Calviղ - avatar
0
calvin How can I pass argument to imgClick() function that you have created?
7th Sep 2018, 2:56 PM
Prathamesh Sawant
Prathamesh Sawant - avatar
0
This is my code after thinking for a while I used global count var to assign click event to each images. This count will increment every time changeSeat function is called and the value of count is incremented, this can be used to get access of each images with similar class name. But I think this is not efficient. Can I have better way? var seat_image=document.getElementsByClassName("seat_image"); var seats=[new Array(4), new Array(4), new Array(4)]; var noOfColumns=seats[0].length; var noOfRows=seats.length; //initializing "seats" array for(var i=0; i<noOfRows;i++){ for(var j=0;j<noOfColumns;j++){ if(Math.random()<0.5){ seats[i][j]=false; } else{ seats[i][j]=true; } } } //after loading window assign seat_avail image to all true and seat_unavail image to all false window.onload=function (){ for(var i=0; i<noOfRows;i++){ for(var j=0;j<noOfColumns;j++){ if(seats[i][j]==true){ seat_image[i*noOfColumns+j].src="images/seat_avail.png"; seat_image[i*noOfColumns+j].alt="Seat Available"; } else{ seat_image[i*noOfColumns+j].src="images/seat_unavail.png"; seat_image[i*noOfColumns+j].alt="Seat Unavailable"; } } } } //on clicking seat image that is available change it to seat_select image for(var i=0;i<noOfRows;i++){ for(var j=0;j<noOfColumns;j++){ seat_image[i*noOfColumns+j].addEventListener("click",changeSeat); } } var count=0; function changeSeat(){ if(count>(noOfColumns*noOfRows)){ return; } seat_image[count].src="images/seat_select.png"; seat_image[count].alt="selected seat"; count ++; }
7th Sep 2018, 3:09 PM
Prathamesh Sawant
Prathamesh Sawant - avatar
0
I found another solution counter method was not working so I tried several things. Finally got what I wanted and feels it is the best way. Here's the code for(var i=0;i<noOfRows;i++){ for(var j=0;j<noOfColumns;j++){ if(seats[i][j]){ seat_image[i*noOfColumns+j].onclick=function(e){ this.src="images/seat_select.png"; } } } } thanx calvin, I don't know how bind() method works. Here in this code for now passing argument is not require after I found this solution. I will try your method where I need to pass argument. :)
7th Sep 2018, 4:38 PM
Prathamesh Sawant
Prathamesh Sawant - avatar