JavaScript getElementByID () não funciona [duplicado]
-
11-09-2019 - |
Pergunta
Esta questão já tem uma resposta aqui:
Por que refButton
get null
no seguinte 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>
Solução
No ponto que você está chamando sua função, o resto da página não fundidas e assim o elemento não está na existência naquele ponto. Tente chamar a sua função na window.onload
talvez. Algo parecido com isto:
<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>
Outras dicas
Você precisa colocar o JavaScript no final da tag body.
Ele não encontrá-lo porque não é no DOM ainda!
Você também pode envolvê-lo no manipulador de eventos onload como esta:
window.onload = function() {
var refButton = document.getElementById( 'btnButton' );
refButton.onclick = function() {
alert( 'I am clicked!' );
}
}
Porque quando o script é executado o navegador ainda não tenha analisado a <body>
, por isso não sabe que existe um elemento com o ID especificado.
Tente isto em vez disso:
<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>
Note que você pode também usar addEventListener
vez de window.onload = ...
para fazer essa função só executar depois de todo o documento foi analisado.