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?