Intento cambiar el color de la barra de navegación cuando se hace clic en el botón de cambio de tema.
Este es el código HTML
<header class="header"> <a href="#"> <img class="logo" alt="logo" src="img/logo.png" /> </a> <nav class="main-nav" id="main-nav"> <ul class="main-nav-list"> <li> <a class="main-nav-link" href="#introduction">Intro</a> </li> <li> <a class="main-nav-link" href="#portfolio">Projects</a> </li> <li> <a class="main-nav-link" href="#contact">Hello</a> </li> <!-- <li><a class="main-nav-link" href="#">section4</a></li> --> </ul> </nav> </header>código JavaScript
const themeChange = () => { const navElements = document.getElementsByClassName("main-nav-link"); // console.log("nav: " + navElements.length); for (let i = 0; i <= navElements.length; i++) { console.log(document.getElementsByClassName("main-nav-link")[i]); document.getElementsByClassName("main-nav-link")[i].className = "main-nav-link-summer"; } }Estoy tratando de cambiar el nombre de la clase de "main-nav-link" a "main-nav-link-summer" para que se pueda cambiar el color para el desplazamiento activo. Pero extrañamente, solo se cambian la primera y la tercera etiqueta y la segunda permanece igual. La longitud de la variable "navElements" es 3.
codigo css
.main-nav-list { list-style: none; display: flex; gap: 4.8rem; align-items: center; /* padding-right: 5rem; */ /* font-size: x-large; */ } .main-nav-link, .main-nav-link-summer { text-decoration: none; display: inline-block; color: white; font-weight: 500; /* font size 1.8 */ font-size: 2.5rem; transition: all 0.3s; } .main-nav-link-summer:hover, .main-nav-link-summer:active { color: #1d4116; } .main-nav-link:hover, .main-nav-link:active { color: #a63ec5; } .sticky { position: fixed; top: 0; bottom: 0; width: 100%; height: 8rem; padding-top: 0; padding-bottom: 0; background-color: rgba(255, 255, 255, 0.97); z-index: 999; box-shadow: 0 100.2rem 3.2rem rgba(0, 0, 0, 0.03); opacity: 0.8; } .sticky .main-nav-link { color: #46244c; } .sticky .main-nav-link:hover, .sticky .main-nav-link:active { color: #a63ec5; }en javascript esa es la forma más fácil, para lo que quieres lograr no estoy exactamente seguro.
const navElements = document.querySelectorAll(".main-nav-link"); navElements.forEach((link) => { link.classList.add("main-nav-link-summer"); }); .main-nav-list { list-style: none; display: flex; gap: 4.8rem; align-items: center; /* padding-right: 5rem; */ /* font-size: x-large; */ } .main-nav-link, .main-nav-link-summer { text-decoration: none; display: inline-block; color: white; font-weight: 500; /* font size 1.8 */ font-size: 2.5rem; transition: all 0.3s; } .main-nav-link-summer:hover, .main-nav-link-summer:active { color: #1d4116; } .main-nav-link:hover, .main-nav-link:active { color: #a63ec5; } .sticky { position: fixed; top: 0; bottom: 0; width: 100%; height: 8rem; padding-top: 0; padding-bottom: 0; background-color: rgba(255, 255, 255, 0.97); z-index: 999; box-shadow: 0 100.2rem 3.2rem rgba(0, 0, 0, 0.03); opacity: 0.8; } .sticky .main-nav-link { color: #46244c; } .sticky .main-nav-link:hover, .sticky .main-nav-link:active { color: #a63ec5; } <header class="header"> <a href="#"> <img class="logo" alt="logo" src="img/logo.png" /> </a> <nav class="main-nav" id="main-nav"> <ul class="main-nav-list"> <li> <a class="main-nav-link" href="#introduction">Intro</a> </li> <li> <a class="main-nav-link" href="#portfolio">Projects</a> </li> <li> <a class="main-nav-link" href="#contact">Hello</a> </li> <!-- <li><a class="main-nav-link" href="#">section4</a></li> --> </ul> </nav> </header>Yo sugeriría un enfoque diferente todos juntos. Pasar por y hacer cambios masivos de nombre de clase es realmente subóptimo para desarrollo y mantenimiento. Tal vez considere un enfoque como el ejemplo a continuación como una simple prueba de concepto usando temas css var separados para que no piense en esas cosas mientras construye y pueda manejar un sistema de diseño de manera mucho más flexible sin acumular muchos códigos adicionales innecesarios. Salud.
const htmlEl = document.documentElement; // set a detault or read their saved selection from localstorage or whatever. htmlEl.dataset.theme = 'default'; // set the new selectiong when made. toggleTheme = (theme) => htmlEl.dataset.theme = theme; html[data-theme="default"] { --body-bg: #f1f1f1; --body-color: #000; --btn-color: #212121; --btn-bg: #fff; --btn-hover-color: #a63ec5; --btn-hover-bg: #ddd; } html[data-theme="summer"] { --body-bg: lightblue; --body-color: #000; --btn-color: darkgreen; --btn-bg: lightyellow; --btn-hover-color: #1d4116; --btn-hover-bg: #f1f1f1; } html[data-theme="winter"] { --body-bg: #333; --body-color: #fff; --btn-color: #f1f1f1; --btn-bg: #212121; --btn-hover-color: lightblue; --btn-hover-bg: #555; } html { color: var(--body-color); background-color: var(--body-bg); } .main-nav-list { list-style: none; display: flex; align-items: center; /* padding-right: 5rem; */ /* font-size: x-large; */ } .main-nav-link { text-decoration: none; display: inline-block; color: var(--btn-color); background-color: var(--btn-bg); padding: .25rem 1rem; border-radius: 5px; font-weight: 500; /* font size 1.8 */ font-size: 2.5rem; transition: all 0.3s; } .main-nav-list li:not(:last-child) { margin-right: 1.5rem; } .main-nav-link:hover, .main-nav-link:active { color: var(--btn-hover-color); background-color: var(--btn-hover-bg); } <br> <strong>Choose your theme:</strong> <select id="mySelect" onchange="toggleTheme(this.value)"> <option value="default">Default</option> <option value="summer">Summer</option> <option value="winter">Winter</option> </select> <br><hr><br> <header class="header"> <a href="#"> <img class="logo" alt="logo" src="img/logo.png" /> </a> <nav class="main-nav" id="main-nav"> <ul class="main-nav-list"> <li> <a class="main-nav-link" href="#introduction">Intro</a> </li> <li> <a class="main-nav-link" href="#portfolio">Projects</a> </li> <li> <a class="main-nav-link" href="#contact">Hello</a> </li> <!-- <li><a class="main-nav-link" href="#">section4</a></li> --> </ul> </nav> </header>