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

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 >
         <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 >
         <input type="checkbox" >
         <span  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";
      }
  }

CodePudding user response：

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 >
    <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>

CodePudding user response：

you should change it to this

      const navLinks = document.querySelectorAll("#link a");

also don't forget to fix html

<ul >
      <li id="link"><a href="#">Home</a></li>
      <li id="link"><a href="#">Projects</a></li>
      <li id="link" ink><a href="#">About</a></li>
      <li id="link" ink><a href="#">Contacts</a></li>
    </ul>