1

Encontré una pregunta en ingles acerca de un problema de métodos pero ninguno en español y referente al titulo que menciono. Espero que resuelvan algunas dudas.

Este es un archivo app.js externo ubicado entre los<head><script src="app.js"></scritp></head> que lo único que hace es pintar un "Hola Mundo" al index.html principal por medio de una acción del click.

  document.getElementById("boton").addEventListener("click", function(){
  document.getElementById("text").innerHTML = "Hello World";});

Al momento de cargar(F5) la pagina se observa un error en consola de Chrome:

Uncaught TypeError: Cannot read property 'addEventListener' of null

y algo parecido en Firefox:

TypeError: document.getElementById(...) is null

0

2 respuestas 2

1

Bueno este error se produce por el solo hecho de esperar una acción del elemento indicado (DOM).

Esto se puede solucionar de dos maneras (aún de existir otras) :

Solución 01

  window.onload=function(){
     document.getElementById("boton").addEventListener("click", function(){
     document.getElementById("text").innerHTML = "Hello World";
  }

Este método hace que cargue la ventana de nuestro index.html principal (BOM) luego accione los métodos y elementos por medio de la función anónima.

Solución 02

Otra forma es colocar nuestro archivo externo app.js en el <body><script src="app.js"></script></body> del HTML. Pues de forma directa identificará el elemento dentro del DOM.

0

El error te sale por que aún no se ha creado el botón que estás buscando getElementById("boton") una forma de solucionarlo de forma sencilla es que cargues el archivo javascript justo antes de cerrar el body

<body>
  <button id="boton"></button>
  <script src="app.js"></script>
</body>

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.