jeudi 5 octobre 2017

Iterative JavaScript function to hide or show multiple images with for and if statements

I want to hide and show mulitple images, depending on the input code "places" inside the function:

function ShowPicture(tekst, places){
 for (var i = 0, i < places.length; i++) {
    var idCust ="pic" + places[i];
    var imag = document.getElementById(idCust);
 if(imag.style.display === 'block'){ 
     imag.style.display = 'none'; tekst.style.color = '';} 
 else { 
     imag.style.display = 'block'; tekst.style.color = 'red';}}}

two examples of a "places" code is

"123" and "24"

The function should read off the three numbers separately and hide or show the corresponding "idCust" from the css part. I have made id's in the css that is named "pic1", "pic2", etc.

For some reason, this is not working when I call the "ShowPicture" function after clicking on a div with the "onclick" statement. I got the feeling it has something to do with my for loop.. maybe there is a way to hide/show all together at once, but it should only show the images that correspond to the div I clicked on.

Aucun commentaire:

Enregistrer un commentaire