0

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.

1
  • Podrias poner tu codigo html?
    – Layer
    Commented el 7 may. 2020 a las 22:10

1 respuesta 1

3

Recuerda que cuando estas interactuando con etiquetas de html en js primero se deben cargar todas las etiquetas html;Creo que tu problema es porque quieres acceder a ellas cuando aun no se han cargado por completo tu html.Esto simplemente se arregla poniendo tu vinculo al archivo externo de js hasta el final de tu archivo.html si este no es el problema comparte tu código para poder ayudarte mejor.

para enlazar tu archivo .htm a tu archivo .js ejemplo:

<script src="rtuta archivo .js"></script> 

Otra opción seria: para asegurarnos que los elementos html están siendo 100% cargados al momento de que js empieza a correr vamos a advertirle al js usando:

window.onload = function() { //Aquí la instancia a eventos desde elementos que ya están cargados dentro de la página }

Implementada con arrow function:

window.onload = () => {}
4
  • Si justo pense en lo mismo.
    – Layer
    Commented el 7 may. 2020 a las 22:25
  • Comparti plantilla principal HTML, que es donde se renderizan los templates, si lo linkeo ahí tampoco podría acceder a los ID, donde debería linkearlo? Porque el resto de HTML se introduce con los templates de Js y es ahí donde estan los IDs, avisenme si necesita algo de más de codigo, por favor. Commented el 8 may. 2020 a las 1:46
  • ok para asegurarnos que los elementos html están siendo 100% cargados al momento de que js empieza a correr vamos a advertirle al js usando window.onload = function() { //Aquí la instancia a eventos desde elementos que ya están cargados dentro de la página } Commented el 8 may. 2020 a las 2:14
  • Añadi el window.onload = () => {} y en el entry de webpack adicione el archivo donde esta el script de los eventos y perfecto. Commented el 8 may. 2020 a las 2:46

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.