Creé un sitio web que tiene index.html y quiz.html, un estilo.CSS y una aplicación.JavaScript.
He agregado algunas funciones en el JS que se refieren a ambas páginas. Digamos: página 1 index.html: app.js tiene un detector de eventos para mostrar un cuadro al hacer clic. Ese cuadro tiene un botón para moverse a quiz.html (todo funciona bien). Página 2 quiz.html: en JavaScript tengo funciones para ejecutar el cuestionario. El problema es que el código se rompe antes de llegar a las funciones del cuestionario, con una línea que hace referencia a la primera página.
Error: app.js:14 Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') at app.js:14:35
La línea 14 es document.getElementById('btnPlay').addEventListener('click', openBox) , que hace referencia a un elemento dentro de index.html, no a la página en la que ahora estoy quiz.html.
Entiendo por qué, porque en esta página actual no tenemos una referencia a ella. Pero he leído en muchos lugares que generalmente es mejor usar un archivo app.js y no uno por página html. ¿Cómo hacemos que esto funcione? ¿Alguna sugerencia?
En alguna página B no tiene ese elemento #btnPlay , por lo tanto document.getElementById('btnPlay') es igual a undefined . Y no puede asignarle un detector de eventos: undefined.addEventListener .
Para asegurarse de que ese elemento existe, antes de seguir adelante
utilizar encadenamiento opcional ?. .
document.getElementById('btnPlay')?.addEventListener('click', openBox)de lo contrario, en la página B , "#btnPlay" no se encuentra y su JavaScript se romperá.
Otra forma "antigua" de abordar ese problema habría sido usar una declaración:
const EL_btnPlay = document.querySelector("#btnPlay"); if (EL_btnPlay) EL_btnPlay.addEventListener("click", openBox);donde lo anterior es solo una forma abreviada de hacer lo mismo.