JavaScript GetElementByID () no funciona [duplicado]

StackOverflow https://stackoverflow.com/questions/1829925

  •  11-09-2019
  •  | 
  •  

Pregunta

    

Esta pregunta ya tiene una respuesta aquí:

         

¿Por qué refButton obtener null en el siguiente código JavaScript? 

<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>
¿Fue útil?

Solución

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 momento. Trate de 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>

Otros consejos

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

no lo encuentra, porque no es en el DOM todavía!

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!' );
}
}

Debido a que el script se ejecuta el navegador aún no ha analizado la <body>, por lo que no sabe que existe 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 usted puede también utilizar en lugar de addEventListener window.onload = ... para hacer esa función sólo después de ejecutar todo el documento se ha analizado.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top