Changing style for a set of elements with JavaScript

Question

I'm trying to change the css properties of a class when I click on an element with Javascript. My code looks like this:

HTML:

<li class="nav-item">
  <a class="nav-link text-center" onclick="myFunction()">
    <i class="fa fa-fw fa-angle-left"></i>
  </a>
</li>

JS:

function myFunction() {
  document.getElementsByClassName("card").style.display = "none";
}

This should make all the elements with a class of 'card' disappear right?

Answer 1

getElementsByClassName returns a collections of elements and you need to iterate over each element to set styles.