uso de modulos en javascript

Publicado por Jorge Gomez
hace 3 semanas

Hola buenas tarde. Estoy empezando con javascript y estoy usando import y export en javascript. Espero me puedan orientar con un errror que me aparece en las herramientas del navegador. La situación es esta: tengo un html pagina 1 y un html pagina 2, en la pagina 1 solo hay un boton que al hacer clic en el redirige a la pagina 2. En el modulo .js ligado a la pagina uno tengo export una variable al inicio, luego hago un 'DOMContentLoaded' y dentro de ese evento la lógica para obtener el boton y que redirija hacia la segunda pagina y funciona me redirige y en la segunda pagina puedo obtener el valor de la variable. Pero en las herramientas del navegador de la segunda pagina una vez reedirigido me aparece el error de que btn .addEvenetListener is null aun cuando ese evento no lo he exportado ni tampoco he importado dicho evento en el segundo modulo javascript. Agradezco de antemano si alguien me puede orientar. Quedo ateneto a comentarios.

export import javascript
Respuesta de Cristian Olaz
hace 2 semanas

Hola Jorge,

Entiendo que tenés un módulo Javascript que importás tanto en la página 1 como en la página 2. En la página 1 funciona bien pero en la página 2 te dice que no encuentra el botón de redireccionamiento.

Lo que ocurre es que aunque no estés exportando esa función desde el módulo, aún así se ejecuta al cargarse el archivo.

Entonces en tu módulo podrías intentar definir ese evento de la siguiente forma:

document.addEventListener("DOMContentLoaded", () => {
    const btn = document.getElementById("boton");

    // Con esta condición evitas el error en la página 2
    if (btn) {
        btn.addEventListener("click", () => {
            window.location.href = "pagina2.html";
        });
    }
});

Espero que te sirva! Saludos,

Respuesta de Jhon
hace 1 día

Cuando estudiaba Desarrollo de Software en la UNIAT, también me encontré con errores similares al manejar eventos en distintas páginas. Ese error suele pasar porque en la segunda página el botón que intentas usar no está presente, entonces btn es null. Revisa que el código que usa ese botón solo se ejecute donde el botón exista, así evitas ese problema. ¡Con práctica va quedando más claro!