The site has 25 pictures, I wanted that when I clicked on the picture, it would become large, almost on the whole screen. In principle, my code works, but each image has its own function, that is, 25 functions. I wanted to make one function for all the pictures. I created an array of images and tried to associate it with the function that makes the pictures larger, but the code does not work. Please tell me how to implement it?

Closed due to the fact that off-topic participants Kromster , Enikeyschik , LFC , freim , vmchar May 22 at 12:14 .

It seems that this question does not correspond to the subject of the site. Those who voted to close it indicated the following reason:

  • “Questions asking for help with debugging (“ why does this code not work? ”) Should include the desired behavior, a specific problem or error, and a minimum code for playing it right in the question . Questions without an explicit description of the problem are useless for other visitors. See How to create minimal, self-sufficient and reproducible example . " - Kromster, Enikeyschik, LFC, freim, vmchar
If the question can be reformulated according to the rules set out in the certificate , edit it .

  • Questions asking for help with debugging (“why does this code not work?”) Should include the desired behavior, a specific problem or error, and a minimum code for playing it right in the question . Questions without an explicit description of the problem are useless for other visitors. - Kromster

1 answer 1

If there is a code of this type:

document.getElementsByClassName(" .. ")[0]... document.getElementsByClassName(" .. ")[1]... document.getElementsByClassName(" .. ")[2]... ... document.getElementsByClassName(" .. ")[n]...

They use loops that essentially do the same thing, they only allow to significantly reduce the code. One of them is for(); Its general appearance is:

 for( откуда начинаем считать, до какого числа считаем, как считаем ) { код }

And on a real example, it looks like this:

 for( var i = 0; i < 5; i+=1 ) { alert( 'На этом круге i равен: ' + i ); }

The code above will do the same as this one:

 alert( 'Бубу: 0' ); alert( 'Бубу: 1' ); alert( 'Бубу: 2' ); alert( 'Бубу: 3' ); alert( 'Бубу: 4' );

The created variable i simply takes a certain value on each circle: Initially, it is = 0, after each circle it increases by +1 (i+=1) , and so on until i continues to be less than 5.

In your case it will look like this:

 var modalImg = document.getElementById("img01"); var captionText = document.getElementById("caption"); var modal = document.getElementById('myModal'); //Один раз создаем переменную, получаем элементы по классу. var img = document.getElementsByClassName("foto-portfolio"); for( var i = 0; i < img.length; i++){ //img.length = количество классов "foto-portfolio" //i++ короткая запись... это то же, что и i = i + 1 или i+=1; //Там могло бы быть и i+=2, i-- и т.п. img[i].addEventListener('click', function(){ modal.style.display = "block"; modalImg.src = this.src; captionText.innerHTML = this.alt; }); }

addEventListener is the main way to add an event ('click', 'input', etc.) to an element. It is cooler than onclick, because there can be a bunch of different addEventListener for one element ... and only one onclick will work. If you add several onclick to the same element, only one will work.

  • 3
    How many you had to make assumptions about the problems of the author :), and it’s not at all a fact that you guessed it. IMHO, I would still ask the author of the question to concretize the problem and attach the code, - Alexander Muksimov