How to change the font color of a list in Javascript?

May 2, 2022

So, I’m trying to make these nav-links of mine to change its color whenever I click a button, but it does not seem to work.

   <ul class="nav-links">
         <li id = link><a href="#">Home</a></li>
         <li id = link><a href="#">Projects</a></li>
         <li id = link><a href="#">About</a></li>
         <li id = link><a href="#">Contacts</a></li>
   </ul>
   <label class="toggle">
         <input type="checkbox" class="check">
         <span class="slider" onclick="dark()"></span>
   </label>

I tried doing this script but it still doesn’t work

  const text = document.querySelector(".logo");
  const body = document.querySelector("body");
  const banner = document.querySelector(".L-banner");
  const navLinks = document.getElementById("#link");
  function dark(){
      text.style.color = "#fff";
      body.style.background = "#000";
      banner.style.color = "#fff";

      for(var i = 0; i < navLinks.length; i++){
        navLinks[i].style.color = "#fffff";
      }
  }

>Solution :

You can’t give multiple elements the same ID, and querySelector only selects a single element.

To select all the links, you can use querySelectorAll

document.getElementById('button').addEventListener('click', changeColor);
function changeColor() {
    const links = [...document.querySelectorAll('.nav-links li a')];
    links.forEach(link => link.style.color = "cornflowerblue");
}

<ul class="nav-links">
    <li>
        <a href="#">Home</a>
    </li>
    <li>
        <a href="#">Projects</a>
    </li>
    <li>
        <a href="#">About</a>
    </li>
    <li>
        <a href="#">Contacts</a>
    </li>
</ul>
<button id="button">Change link color</button>