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

Question

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?

Answer 1

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

Answer 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

Answer 3

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

Answer 4

calvin How can I pass argument to imgClick() function that you have created?

Answer 5

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 ++;
}

Answer 6

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. :)