Entonces, estoy tratando de hacer que estos enlaces de navegación cambien de color cada vez que hago clic en un botón, pero parece que no funciona.
<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>Intenté hacer este script pero todavía no funciona.
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"; } }No puede dar a varios elementos el mismo ID, y querySelector solo selecciona un solo elemento.
Para seleccionar todos los enlaces, puede usar 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>deberías cambiarlo por este
const navLinks = document.querySelectorAll("#link a");tampoco olvides corregir 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>