JavaScript getElementByID() no funciona

¿Por qué refButton obtiene null en el siguiente código JavaScript?JavaScript getElementByID() no funciona

<html> 
<head> 
    <title></title> 
    <script type="text/javascript"> 
     var refButton = document.getElementById("btnButton"); 

     refButton.onclick = function() { 
      alert('I am clicked!'); 
     }; 
    </script> 
</head> 
<body> 
    <form id="form1"> 
    <div> 
     <input id="btnButton" type="button" value="Click me"/> 
    </div> 
    </form> 
</body> 
</html>

Fuente

2009-12-02 anonymous

En el punto de que está llamando a su función, el resto de la página no ha prestado y por lo que el elemento no está en existencia en ese punto. Intente llamar a su función en window.onload, tal vez. Algo como esto:

<html> 
<head> 
    <title></title> 
    <script type="text/javascript"> 
     window.onload = function(){ 
      var refButton = document.getElementById("btnButton"); 

      refButton.onclick = function() { 
       alert('I am clicked!'); 
      } 
     }; 
    </script> 
</head> 
<body> 
    <form id="form1"> 
    <div> 
     <input id="btnButton" type="button" value="Click me"/> 
    </div> 
    </form> 
</body> 
</html>

Fuente

2009-12-02 00:28:43 jaywon

O considere usar Prototype, JQuery o algún otro paquete para manejar el evento DOM ready. –

No creo que necesite importar una biblioteca completa solo para el evento listo para DOM. ;) –

@Paul - buen punto. @JMSA el evento listo para DOM realmente se dispara ANTES de que se descarguen todas las imágenes y DESPUÉS de todos los scripts y la página se haya descargado. Por lo tanto, el evento listo para DOM se dispara antes del evento window.onload. :) – jaywon

Es necesario poner el código JavaScript al final de la etiqueta del cuerpo.

¡No lo encuentra porque todavía no está en el DOM!

También puede envolver en el controlador de eventos onload como esto:

window.onload = function() { 
var refButton = document.getElementById('btnButton'); 
refButton.onclick = function() { 
    alert('I am clicked!'); 
} 
}

Fuente

2009-12-02 00:28:18

¿Es esta la práctica estándar o solo en este caso? – anonymous

La práctica estándar es iniciar la ejecución desde el momento en que se carga la página. –

Es una práctica estándar ejecutar scripts solo después de que se haya construido el árbol DOM. –

Porque cuando el script se ejecuta el navegador aún no ha analizado la <body>, por lo que no sabe que hay un elemento con el id especificado.

Tal vez puedas probar:

<html> 
<head> 
    <title></title> 
    <script type="text/javascript"> 
     window.onload = (function() { 
      var refButton = document.getElementById("btnButton"); 

      refButton.onclick = function() { 
       alert('Dhoor shala!'); 
      }; 
     }); 
    </script> 
    </head> 
<body> 
    <form id="form1"> 
    <div> 
     <input id="btnButton" type="button" value="Click me"/> 
    </div> 
</form> 
</body> 
</html>

Tenga en cuenta que es posible utilizar como así addEventListener en lugar de window.onload = ... para hacer que la función sólo después de ejecutar todo el documento se ha analizado.

Fuente

2009-12-02 00:32:47

window.onload no se activa hasta que se haya analizado todo el documento y se hayan descargado todos los archivos – jaywon

JavaScript getElementByID() no funciona

Respuesta

Cuestiones relacionadas