JavaScript getElementByID() が機能しない [重複]
-
11-09-2019 - |
質問
この質問にはすでに答えがあります:
どして refButton
得る null
次の 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>
解決
は、あなたがあなたの関数を呼び出している時点では、ページの残りの部分はレンダリングされていないので、要素は、その時点で存在していません。多分window.onload
であなたの関数を呼び出してみてください。このような何かます:
<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>
他のヒント
あなたは、bodyタグの終わりの JavaScriptを配置する必要があります。の
それはまだDOMではないのでそれはそれを見つけることができません!
また、このようにonloadイベントハンドラでそれをラップすることができます:
window.onload = function() {
var refButton = document.getElementById( 'btnButton' );
refButton.onclick = function() {
alert( 'I am clicked!' );
}
}
スクリプトが実行されたとき、それは指定されたidを持つ要素があることを知らないので、ブラウザはまだ、<body>
を解析されていないので。
の代わりにこれを試してください:
<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>
あなたが同様に文書全体が解析された後、その関数のみを実行させるための代わりaddEventListener
のwindow.onload = ...
を使用することができることに注意します。
所属していません StackOverflow