Estoy desarrollando una SPA con Js Vanilla y Webpack, ya tengo el router y todos los templates, ahora estoy empezando con el JavaScript para la interacciones con los botones y las demás necesidades de la misma, lo que me sucede es que al pedir un ID del HTML en Js no me trae el elemento. Explico:
En el archivo index.js
que esta como entry
en Webpack estoy haciendo un import
de la función donde tengo el codigo que trae el valor ID con un
const menuButton = document.getElementById('menu-button');
La función se llama correctamente pero no la variable menuButton
es null
, escribí el mismo código en el entry
por si estaba haciendo mal el import
pero tampoco me trae el elemento HTML.
No sé si el llamado de los ID necesite otro método en una SPA,se me hace raro porque las clases de CSS los pude llamar en los estilos sin ningún problema.
Cabe aclarar que en el index.js
del entry
se hizo el import
del router con todos los templates y del CSS y por ese lado todo funciona correctamente.
Mi codigo puro HTML solo esta en la plantilla principal, que es donde se renderizan los templates desde Js y el ID o los IDs estan en los templates.
<!-- This file is main template -->
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Ropa+Sans&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
<title>18:06 Panadería</title>
</head>
<body>
<header id="header">
</header>
<div id="main__container">
<section id="home">
</section>
<section id="hero-section" class="hero__container">
</section>
<section id="menu-section" class="menu__container">
</section>
<section id="recipes-section">
</section>
<section id="delivery-section">
</section>
<footer id="footer-section">
</footer>
</div>
</body>
</html>
Trate de exponer mi caso lo mejor posible, si necesitan más código me dicen.