I'm trying to make some stuff invisible after I press a button. The thing is I wanna target multiple things at the same time.

So I can't use: document.getElementById("targ").style.visibility = "hidden";

Because it targets only 1 element out of 4.

I tried using: `document.getElementsByClassName("targ").style.visibility = "hidden";

        <div id="navbar" class="sticky">
            <li><a href="#top" style="padding:0px" id="targimg"><img src="act_logo.png"></a></li>
            <li><a href="#description" class="targ">Description</a></li>
            <li><a href="#video" class="targ">Video</a></li>
            <li style="float:right" class="targ"><a href="#top">Top</a></li>
            <li><a href="#explication" class="targ">Explication</a></li>
            <li><a><span style="font-size:20px;cursor:pointer" onclick="openNav()">&#9776; open</span></a></li>
        </div>

<script>
function openNav() {
                document.getElementById("mySidenav").style.width = "250px";
                document.getElementsByClassName("targ").style.visibility = "hidden";
                document.getElementById("targimg").style.textAlign = "center";
            }
</script>

I'm trying to make some stuff invisible after I press a button. The thing is I wanna target multiple things at the same time.

So I can't use: document.getElementById("targ").style.visibility = "hidden";

Because it targets only 1 element out of 4.

I tried using: `document.getElementsByClassName("targ").style.visibility = "hidden";

        <div id="navbar" class="sticky">
            <li><a href="#top" style="padding:0px" id="targimg"><img src="act_logo.png"></a></li>
            <li><a href="#description" class="targ">Description</a></li>
            <li><a href="#video" class="targ">Video</a></li>
            <li style="float:right" class="targ"><a href="#top">Top</a></li>
            <li><a href="#explication" class="targ">Explication</a></li>
            <li><a><span style="font-size:20px;cursor:pointer" onclick="openNav()">&#9776; open</span></a></li>
        </div>

<script>
function openNav() {
                document.getElementById("mySidenav").style.width = "250px";
                document.getElementsByClassName("targ").style.visibility = "hidden";
                document.getElementById("targimg").style.textAlign = "center";
            }
</script>

`

But this isn't able to change the visibility. I get the error: Uncaught TypeError: Cannot set property 'visibility' of undefined at (then theres my function name here)

• javascript
• html

Share Improve this question Follow asked Apr 11, 2019 at 0:43 Hayk PetrosyanHayk Petrosyan 7311 gold badge11 silver badge77 bronze badges 3

• Well, when you are using getElementsByClassName method returns a collection, not a single element, so there's no such property as visibility on it. Thus, do everything you are doing but in a loop context. You know, the for (let el of collection) {} stuff... – John Doe Commented Apr 11, 2019 at 0:46
• class does not equal id.... – epascarello Commented Apr 11, 2019 at 0:50
• 1 stackoverflow./questions/10693845/… – epascarello Commented Apr 11, 2019 at 0:50

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

Because getting elements by class name produces a list, you need to add the style to each element individually by running through the list. I remend also that the targ class be given to the li tag rather than the anchor, as hiding the anchor still leaves the list item with its bullets:

function openNav() {
  // document.getElementById("mySidenav").style.width = "250px";
  targList = document.getElementsByClassName("targ");
  document.getElementsByClassName("targ")
  if (targList) {
    for (var x = 0; x < targList.length; x++) {
      targList[x].style.visibility = "hidden";
    }
  }
  document.getElementById("targimg").style.textAlign = "center";
}

<div id="navbar" class="sticky">
  <li>
    <a href="#top" style="padding:0px" id="targimg"><img src="act_logo.png"></a>
  </li>
  <li><a href="#description" class="targ">Description</a></li>
  <li><a href="#video" class="targ">Video</a></li>
  <li style="float:right" class="targ"><a href="#top">Top</a></li>
  <li><a href="#explication" class="targ">Explication</a></li>
  <li><a><span style="font-size:20px;cursor:pointer" onclick="openNav()">&#9776; open</span></a></li>
</div>

You need to loop the result of document.getElementsByClassName("targ").

document.getElementsByClassName("targ").forEach(e => e.style.visibility = "hidden");

How about toggling visibility of the <li> elements container instead of targeting them directly:

window.addEventListener('DOMContentLoaded', () => {
  document.querySelector('.menu-trigger').addEventListener('click', (event) => {
    event.stopPropagation();
    event.preventDefault();

    openNav();
  });
});

function openNav() {
  // document.getElementById("mySidenav").style.width = "250px";

  const menuEl = document.querySelector('.menu');
  menuEl.classList.toggle('menu-off');

  // document.getElementById("targimg").style.textAlign = "center";
}

.menu-off {
  visibility: hidden;
  opacity: 0;
}

<div id="navbar" class="sticky">
  <ul class="menu">
    <li>
      <a href="#top" style="padding:0px" id="targimg"><img src="act_logo.png"></a>
    </li>
    <li><a href="#description" class="targ">Description</a></li>
    <li><a href="#video" class="targ">Video</a></li>
    <li style="float:right" class="targ"><a href="#top">Top</a></li>
    <li><a href="#explication" class="targ">Explication</a></li>
  </ul>

  <a class="menu-trigger">
    <span style="font-size:20px;cursor:pointer">&#9776; open</span>
  </a>
</div>