0

i want to hide images with the same class in Javascipt. i have 3 images to hide but i don't know how can i do it. I tried it but did't work:

html

<img src="img1.png" class="tool">
<img src="img2.png" class="tool">
<img src="img3.png" class="tool">

js

const toolHide = document.getElementsByClassName("tool");
for (i=0; i < toolHide.length; i++) {
    if (toolHide.style.visibility  === "visible") {
        toolHide.style.visibility = "hidden";
    }
}

please help!

sznajper
  • 1
  • 3

1 Answers1

0

Skip the condition, and just set its visiblity (if that's what you actually want to use), and use "hidden" (two "d"s). You also forgot to use your index to access each item in the list.

 //   v--- use declarations!
for (let i=0; i < toolHide.length; i++) {
        toolHide[i].style.visibility = "hidden";
}

The .style property only gives you styles set directly on the element.

If you want to actually hide the entire element, and not just make it invisible, then use the display property.

        toolHide[i].style.display = "none";

Lastly, I'd rather add a class that has the display/visibility properties that you want.

         toolHide[i].classList.add("hidden");

Then be sure to define a .hidden class in your CSS.

Ultimately, I'd rather do this:

document.querySelectorAll(".tool")
  .forEach(el => el.classList.add("hidden"));