How to hide pictures in JS

Question

I'm trying to hide pictures displayed on my website. I've got a list of options where I choose only one picture which I want to show and a button to execute the event. So my issue is that when I press the button, pictures only hide for a moment (I want them to be gone for good). What am I doing wrong?

document.addEventListener("DOMContentLoaded", function () {

var select = document.querySelector(".form-control");
var img = document.querySelectorAll("img");
var submit = document.querySelector("button");

var imgApple = img[0];
var imgUbuntu = img[1];
var imgWindows = img[2];

submit.addEventListener("click", function () {
      if (select.value == "Windows") {
        imgApple.style.visibility = "hidden";
        imgUbuntu.style.visibility = "hidden";
      } else if (select.value == "Os X") {
        imgApple.style.visibility = "visible";
        imgUbuntu.style.visibility = "hidden";
      } else if (select.value == "Ubuntu") {
        imgApple.style.visibility = "hidden";
        imgWindows.style.visibility = "hidden";
      }
   });
});

sry, my english isn't good. I only want to display one picture I've chosen in the list. — uiguyf ufdiutd, Jul 11 '18 at 19:10
try `display:none` instead. Look at [what-is-the-difference-between-visibilityhidden-and-displaynone](https://stackoverflow.com/questions/133051/what-is-the-difference-between-visibilityhidden-and-displaynone) — pbachman, Jul 11 '18 at 19:14
It sounds like you may be reloading the page on the button click. Is your button in a form or labeled `type=submit`? — Amanda Harvey, Jul 11 '18 at 19:38

Mohammad · Answer 1 · 2018-07-12T09:34:44.723

instead of style.visibility try style.display (i also tried it in jsfiddle)

   submit.addEventListener("click", function () {

if (select.value == "Windows") {
    imgWindows.style.display= "block";
    imgApple.style.display= "none";
    imgUbuntu.style.display= "none";
} else if (select.value == "Os X") {
    imgApple.style.display= "block";
    imgUbuntu.style.display= "none";
    imgWindows.style.display= "none";
} else if (select.value == "Ubuntu") {
    imgUbuntu.style.display= "block";
    imgApple.style.display= "none";
    imgWindows.style.display= "none";
}

i hope it helps.

How to hide pictures in JS

1 Answers1