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";
}
}
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>you should change it to this
const navLinks = document.querySelectorAll("#link a");
also don't forget to fix html
<ul class="nav-links">
<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>