Change the style of multiple elements with the same class

You have to understand the difference between classes and IDs. Classes in HTML mark elements that have something in common (similar style, similar behavior, ...). IDs however uniquely identify an element in the DOM, which means that you should only have one element with a particular ID.

The id global attribute defines a unique identifier (ID) which must be unique in the whole document.

From MDN.

This is why document.getElementById is not called document.getElementsById. For classes, you have document.getElementsByClassName, to select all elements with a specific class attribute.

By the way, this is called HTML:

<!-- You were missing a '=' before the "...". --> <!-- Don't use IDs for multiple elements! --> <a href="..." class="site-nav__link">Home</a> <a href="..." class="site-nav__link">All Collections</a> <a href="..." class="site-nav__link">Blog</a> <a href="..." class="site-nav__link">About us</a> 

... and this is called JavaScript, not Java:

var elem = document.getElementById("AccessibleNav"); 

OK, so in order to select all the elements which a specific class, use document.getElementsByClassName:

function makeThemWhite () { var elements = document.getElementsByClassName('site-nav__link'); for (var i = 0; i < elements.length; i++) { var element = elements[i]; element.style.color = 'white'; } } document.getElementById('make-them-white').addEventListener('click', makeThemWhite);

a { background-color: green; }

<a href="..." class="site-nav__link">Home</a> <a href="..." class="site-nav__link">All Collections</a> <a href="..." class="site-nav__link">Blog</a> <a href="..." class="site-nav__link">About us</a> <button id="make-them-white">Make them white!</button>

You could achieve the same using document.querySelectorAll, like @gauravmuk did:

var elements = document.querySelectorAll('.site-nav__link-id'); 

But use the class selector instead of the id selector. It works, but should not be used!

I hope I could make things clearer for you.

There is an easy way of doing this with current JS functionality (for of):

 var elements = document.getElementsByClassName('class_name'); for (let element of elements) { element.style.color = "cyan"; element.style.display = "initial"; } 

Just replace class_name for the class you want to select. If you just need to change one style you can compact the whole thing to just two lines:

 var elements = document.getElementsByClassName('class_name'); for (let element of elements) { element.style.display = "none"; }