Alex_Undr_P

That's what i started doing. And finish it up (but i++; before every function to show modal ectually worked, and it changed the value of every variable) i didn't use the loop but i reenter vars after every i++; and it's worked. But it looks so dumb to me to making it separate for every img that i have . You saying that there no way to make it in short code for all images thru js only? May be some x var = new array [0,1,2,3,4,5], and if x= one of the elements of array then run function b (); Thank you for reply by the way. here the website you can check it out : alexandyana.net

Hello there, i just started exploring HTML CSS and JS . And have a problem , im sure it's easy but can't find any resources to resolve it , and probably have some mess in there . Ill have on webpage 6 images in each row, and i want to make them modal , and be able to open each of them separate and also clicking next button as well to move to next one till 6th at the end . i tried to increase variable , wich will change numbers to all elements that i need for function , but for some reason it doesnt work . To simplify my problem i made example just for 1 pic and with i++; Everything working perfectly for first picture. html <div class="row"> <div class= "col-2"> <img id="ex1"src="images/IMG-1483.png" alt="damage" /> <div id="exmodal1" class="modal"> <span class="close">&times;</span> <span class="next">&#8250;</span> <img class="modal-content" id="img1"> <div id="caption1"></div> </div> </div> <div class= "col-2"> <img id="ex2"src="images/IMG-1486.jpg" /> <div id="exmodal2" class="modal"> <span class="close">&times;</span> <span class="next">&#8250;</span> <img class="modal-content" id="img2"> <div id="caption2"></div> </div> script var i = 1; var modal = document.getElementById ("exmodal"+i); var img = document.getElementById("ex"+i); var modalImg = document.getElementById("img"+i); var captionText = document.getElementById("caption"+i); img.onclick = function a(){ modal.style.display = "block"; modalImg.src = this.src; captionText.innerHTML = this.alt; } var span = document.getElementsByClassName ("close")[0]; span.onclick = function b() { modal.style.display = "none"; } i++; //isn't it changing upper vars to "exmodal2" "ex2" ... etc. if it is the same function below should work but itdoesnt! img.onclick = function a(){ modal.style.display = "block"; modalImg.src = this.src; captionText.innerHTML = this.alt;} span.onclick = function b() { modal.style.display = "none"; } siding.html