How to get an element to hide/unhide through DOM without using ID?

Question

  var onoffbutton = document.getElementById("onoffInput");
  onoffbutton.addEventListener('click', function(event) {
    if(document.getElementById("demoE").innerHTML==="first"){
    document.getElementById("demoE").innerHTML ="second";
    document.getElementsByClassName('animation').hidden = false;
    return;
    }
    if(document.getElementById("demoE").innerHTML==="second"){
    document.getElementById("demoE").innerHTML ="first";
    document.getElementsByClassName('animation').hidden = true;
    return;
    }
    } , false)

When I use document.getElementsByClassName('animation').hidden = false; it doesn't work, but when I use document.getElementById('animation').hidden = false it helps me unhide an image. The problem is that I have an image that already has an ID attached to it.

<img class="animation" src="gifs/right.gif" hidden> vs. <img class="animation" id="original-pick" hidden> Notice I have two selectors attached to the second element. Thanks!

`document.getElementsByClassName` return an array.. try `var elm = document.getElementsByClassName('animation');elm[0].hidden = false;` — Nishanth Matha, Oct 25 '17 at 01:32

score 0 · Answer 1 · answered Oct 25 '17 at 01:34

0

I think the best option is to use document.querySelector(...):

document.querySelector(".animation").hidden = false;

More documentation of this feature can be found here.

answered Oct 25 '17 at 01:34

Derek Brown

4,232
4
27
44

Knowing how to search stackoverflow is key too! To sort from revelance to number of votes and to see the different ways of getting at the same question (can sort with relevance, # etc). – S.Doe_Dude Oct 25 '17 at 04:26

How to get an element to hide/unhide through DOM without using ID?

1 Answers1