Please tell me how to make sure that by clicking on the image, all other images are hidden. By pressing again, they were shown back.
All blocks have one class. I tried through the cycle, but did not work

function selectimage(item) { var arr = document.getElementsByClassName("image"); for (var i = 0; i < arr.length; i++) { if (arr[i].style.display = "block") arr[i].style.display = "none"; else arr[i].style.display = "block"; } item.style.display = ""; } 
 <div class="image" id="mount" onclick="selectimage(this)"> <img src="img/1.jpg" alt="image"> </div> <div class="image" id="forest" onclick="selectimage(this)"> <img src="img/2.jpg" alt="image"> </div> <div class="image" id="see" onclick="selectimage(this)"> <img src="img/3.jpg" alt="image"> </div>

  • just an annoying typo-oversight if (arr[i].style.display == "block") - Alexey Shimansky
  • yes sure thank you but still it works somehow crookedly: when you click on any image for the first time, the others disappear and appear again, but when on any other then, only one is hidden - Ksu Lyguta
  • Wrote a solution in response. IMHO a little more flexible. Although you can certainly still improve - Alexei Shimansky

2 answers 2

You had just an annoying typo-oversight if (arr[i].style.display == "block") .

But here's a little better script.

  • Pictures are added to the array before the function. And that turns out it every time pulls DOM.
  • There is also a flag isHidden , depending on which changes the visibility of all images.
  • At the end of the script, of course, it is necessary to change the value of the flag to the opposite and forcibly show the picture that was clicked.

 var arr = document.getElementsByClassName("image"); var isHidden = false; function selectimage(item) { for (var i = 0; i < arr.length; i++) { arr[i].style.display = isHidden ? 'block' : 'none'; } isHidden = !isHidden; item.style.display = "block"; } 
 img { max-width: 190px; display: block; } div.image { margin: 5px; float: left; } 
 <div class="image" id="mount" onclick="selectimage(this)"> <img src="http://proxvost.info/photo/fun/kittens/beautiful/009.jpg" alt="image"> </div> <div class="image" id="forest" onclick="selectimage(this)"> <img src="http://ic.pics.livejournal.com/drakonit/14191857/218163/218163_original.jpg" alt="image"> </div> <div class="image" id="see" onclick="selectimage(this)"> <img src="https://i.ytimg.com/vi/SHNnbC4WJCo/maxresdefault.jpg" alt="image"> </div>

  • THANK YOU SO MUCH!!!!!! - Ksu Lyguta

You forgot to register == in if

 function selectimage(item) { var arr = document.getElementsByClassName("image"); for (var i = 0; i < arr.length; i++) { if (arr[i].style.display == "block") arr[i].style.display = "none"; else arr[i].style.display = "block"; } item.style.display = ""; }
  • Thanks, yes! but still it works somehow crookedly: when you click on any image for the first time, the others disappear and appear again, but when on any other then, only one is hidden - Ksu Lyguta
  • You do not get the display = "" parameter from this, so it has an if problem — L. Vadim