1

tengo un problema con el javascript, más exactamente con la propiedad .classList.toggle En teoría estoy definiendo bien los objetos, pero a la hora de hacer click, una vez compilado, en la pagina me salta el siguiente error: TypeError: Cannot read properties of null (reading 'classList') Y no se el porque. He buscado y no he encontrado una respuesta, en la Api de javascript se encuentra la propiedad, así que no creo que sea porque ha sido eliminada, pero si hubiera sido eliminada ¿Cómo se haría? ¿Hay algo que haya que incluir y me este comiendo? O simplemente no estoy definiendo los objetos de forma que sepa al objeto al que me refiero.

body {
  background-image: url("https://64.media.tumblr.com/bd1b0d977b3e43cc5645297d5322662c/tumblr_ndyybljlWc1rvnh7zo1_r1_500.gif");
  overflow: hidden;
  height: 100vh;
  background-size: cover;
  background-position: center;
}
            /* Centrar elemento dentro de main */
.main {
 position: absolute;
 margin: auto;
 left: 0; right: 0;
 top: 0; bottom: 0;
 width: 1404px/*550px*/;
 height: 658px/*315px*/; line-height: 50px; /* Con «line-height» con el mismo valor numérico de la altura centras horizontalmente el texto */

}
.video{
    width: 1370px;
 height: 770px;
}
.navigation{
    position: fixed;
    inset: 20px 0 20px 20px;
    width: 75px;
    background-color: aquamarine;
}
.navigation.open{
    width: 250px;
}
.navigation .menuToggle{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 23px;
}
.navigation .menuToggle ::before{
    content: '';
    position: absolute;
    width: 30px;
    height: 2px;
    background: #333;
    transform: translateY(-8px);
    transition: 0.5s;
}
.navigation.open .menuToggle ::before{
    transform: translateY(0px) rotate(45deg);
}
.navigation .menuToggle ::after{
    content: '';
    position: absolute;
    width: 30px;
    height: 2px;
    background: #333;
    transform: translateY(8px);
    transition: 0.5s;
    box-shadow: 0 -8px 0 #333;
}
.navigation.open .menuToggle ::after{
transform: translateY(0px) rotate(-45deg);
box-shadow: 0 0 0 #333;
}
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="css/estilo1.css">
        <link href="https://fonts.googleapis.com/css?family=Spectral+SC:400,600" rel="stylesheet">
        <title>Prueba</title>
    </head>
    <body>
        <div class="navigation">
            <div class="menuToggle">
                <ul>

                </ul>
            </div>
        </div>
        <script>
            const menuToggle = document.querySelector('.menuToggle');
            const navigation = document.querySelector('.navigator');
            menuToggle.onclick = function(){
                navigation.classList.toggle('open')
            }
        </script>
        <div class="main">
            <iframe class="video" width="560" height="315" src="" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
    </body>
</html>

1
  • 4
    No será porque estas asignando la constante navigation a un elemento que no existe? Fíjate que pones la clase .navigator dentro de su querySelector, la cual no existe en tu código.
    – masterguru
    Commented el 15 mar. 2022 a las 17:36

1 respuesta 1

0

Como bien te comentaron, tienes un error en el querySelector, precisamente aquí, ya que no posees ningún elemento con la clase navigator:

const navigation = document.querySelector('.navigator');

Intuyendo que quieres hacer referencia al div contenedor del menuToggle, que lo defines en JS en la línea anterior, deberías redefinirlo así:

const navigation = document.querySelector('.navigation');

Coincidiendo el nombre con el div declarado anteriormente:

<div class="navigation">
        <div class="menuToggle">
            <ul>

            </ul>
        </div>
</div>
3
  • Cuando son errores tipográficos no solemos poner respuestas, con los comentarios lo aclaramos. Si el OP confirma que solo era eso estas preguntas terminan cerradas porque las preguntas con solo errores tipográficos no ayudan a nadie ni a nada ni son útiles para nadie más que el que lo preguntó.
    – masterguru
    Commented el 20 mar. 2022 a las 21:57
  • Lo siento, no lo sabía.
    – Fabricio
    Commented el 20 mar. 2022 a las 22:27
  • 1
    No te preocupes, ni lo sientas, solo te informaba, pasa a menudo :-) Normalmente son rápidamente cerradas, o bien las elimina el propio OP cuando se da cuenta. Esta se habia quedado zombie esperando alguna respuesta del OP, pero espero que alguien la reporte (a mi no me deja porque me equivoqué al hacerlo) y asi vaya a revisión y la cierren si el OP no dice nada nuevo.
    – masterguru
    Commented el 21 mar. 2022 a las 4:57

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.