0

Como dice en el título, quiero que el nav quede con un color al hacer clic, en el siguiente código de JavaScript pueden probar que si usando querySelector funciona pero solo con el primer LI "portafolio" del nav y yo quiero que funcione con todos por eso use luego querySelectorAll pero me tira error.

let navcolor = document.querySelector(".cambiar-color");

navcolor.addEventListener('mousedown', ()=>{
    navcolor.style="color:#ff3131";
});
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    background: #1a1919;
    color: #F7F0F5;
}

header{
    position: fixed;
    width: 100%;
    height: 10vh;
    margin: 0 10px;
    display: flex;
    justify-content: space-around;
}

#header__nav{
    display: flex;
    align-items: center;
    list-style: none;
}   
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <header>
        <ul id="header__nav">
            <li><a href="#portafolio" class="cambiar-color">Portafolio</a></li>
            <li><a href="#habilidad" class="cambiar-color">Habilidades</a></li>
            <li><a href="#contacto" class="cambiar-color">Contacto</a></li>
        </ul>
    </header>
    <script src="codigo.js"></script>
</body>
</html>

1 respuesta 1

0

En parte te respondiste solo. querySelector solo devuelve un elemento. Necesitas usar querySelectorAll, que devuelve una lista de elementos.

No se puede usar addEventListener sobre una lista. Es necesario recorrerla haciendo lo que fuese con cada elemento individualmente.

Estas listas se pueden recorrer como un arreglo (mediante lista[posicion]) o con forEach.

Más información.

let navcolor = document.querySelectorAll(".cambiar-color")

navcolor.forEach(elemento => elemento.addEventListener('mousedown', ()=>{
    elemento.style="color:#ff3131";
}))
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    background: #1a1919;
    color: #F7F0F5;
}

header{
    position: fixed;
    width: 100%;
    height: 10vh;
    margin: 0 10px;
    display: flex;
    justify-content: space-around;
}

#header__nav{
    display: flex;
    align-items: center;
    list-style: none;
}   
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <header>
        <ul id="header__nav">
            <li><a href="#portafolio" class="cambiar-color">Portafolio</a></li>
            <li><a href="#habilidad" class="cambiar-color">Habilidades</a></li>
            <li><a href="#contacto" class="cambiar-color">Contacto</a></li>
        </ul>
    </header>
    <script src="codigo.js"></script>
</body>
</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.