0

Este es el docuemtno HTML donde esta enlazado el codigo Java Script.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Index</title>
    <link rel="stylesheet" href="../css/StyleIndex.css">
    <script src="../JS/script.js" type="text/javascript"></script>
</head>


<body>

    <!-- SIDMENU COMPLETO -->
    <div id="sidemenu" class="menu-collapsed">

    <!-- HEADER -->
    <div id="header">

        <div id="title"> <span>Navegación</span> </div>

        <!-- boton para colapsar y expandir -->
        <div id="menu-btn">
            <img src="../icons/menu.png" height="20px" alt="">  
        </div>
    </div>


    <!--ITEMS-->

    <div id="menu-items">

        <div class="item">
            <a href="">
                <div class="icon"><img src="../icons/man.png" alt=""></div>
                <div class="title">Caballero</div>
            </a>
        </div>

        <div class="item">
            <a href="">
                <div class="icon"><img src="../icons/man.png" alt=""></div>
                <div class="title">Caballero</div>
            </a>
        </div>

    </div>
   </div>

</body>
</html>

Y este es mi código de JavaScript.

/*Creamos dos variables*/

/*este apuntara al boton del menu-btn */
const btn = document.querySelector('#menu-btn');


/**este aputara a todo el menu */
const menu = document.querySelector('#sidemenu');

/**Agregamos un evento para el boton del menu */
btn.addEventListener('click', e => {
    menu.classList.toggle("menu-expanded");
    menu.classList.toggle("menu-collapsed");

 /**Esta setencia es para que el body se desplace a la derecha y no tape */           
    document.querySelector('body').classList.toggle('body-expanded');
});

Como mencione, si el código Java Script se encuentra fuera del documento html no funciona y me sale el sigueinte error en la consola:

Uncaught TypeError: Cannot read property 'addEventListener' of null

Pero si el codigo java script se encuentra dentro del documento html todo funciona bien sin problemas

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Index</title>
    <link rel="stylesheet" href="../css/StyleIndex.css">
    <script></script>
</head>


<body>

    <!-- SIDMENU COMPLETO -->
    <div id="sidemenu" class="menu-collapsed">

    <!-- HEADER -->
    <div id="header">

        <div id="title"> <span>Navegación</span> </div>

        <!-- boton para colapsar y expandir -->
        <div id="menu-btn">
            <img src="../icons/menu.png" height="20px" alt="">  
        </div>
    </div>


    <!--ITEMS-->

    <div id="menu-items">

        <div class="item">
            <a href="">
                <div class="icon"><img src="../icons/man.png" alt=""></div>
                <div class="title">Caballero</div>
            </a>
        </div>

        <div class="item">
            <a href="">
                <div class="icon"><img src="../icons/man.png" alt=""></div>
                <div class="title">Caballero</div>
            </a>
        </div>

    </div>
   </div>


   <!-- 

AQUI EMPIEZA EL SCRIPT

    -->
   <script>      
      /*Creamos dos variables*/

/*este apuntara al boton del menu-btn */
const btn = document.querySelector('#menu-btn');


/**este aputara a todo el menu */
const menu = document.querySelector('#sidemenu');

/**Agregamos un evento para el boton del menu */
btn.addEventListener('click', e => {
    menu.classList.toggle("menu-expanded");
    menu.classList.toggle("menu-collapsed");

 /**Esta setencia es para que el body se desplace a la derecha y no tape */           
    document.querySelector('body').classList.toggle('body-expanded');
});
   </script>

</body>
</html>

¿A que se debe todo esto?

0

1 respuesta 1

1

Debes colocar el llamado al script al final del body, si lo haces arriba el navegador trata de correr el código sin antes haber creado el DOM completo y entonces no lo puede utilizar ni cambiar ni nada porque aún no existe. Recuerda que es todo en cascada, de arriba hacia abajo.

Tu Respuesta

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