なぜrefButtonがnullになるのですか？JavaScript getElementByID（）が機能しない
<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!');
}
}
これは標準的な方法ですか、この場合のみですか？ – anonymous
標準的な方法は、ページが読み込まれた時点から実行を開始することです。 –
DOMツリーが構築された後にのみスクリプトを実行するのが標準的な方法です。 –
スクリプトが実行されたときにブラウザがまだ<body>が解析されていないので、指定されたIDを持つ要素があることを知らないので。あなたにも、文書全体が解析された後、その関数のみを実行させるためのaddEventListenerの代わりwindow.onload = ...を使用することができ
<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>
注：
は、この代わりにしてみてください。
ドキュメント全体が解析され、すべてのファイルがダウンロードされるまで、window.onloadは起動しません – jaywon
また、DOM readyイベントを処理するためにPrototype、JQuery、その他のパッケージを使用することを検討してください。 –
DOM準備完了イベントのためだけにライブラリ全体をインポートする必要はないと思います。 ;） –
@Paul - 良い点。 @JMSAすべてのイメージがダウンロードされ、すべてのスクリプトとページがダウンロードされる前に、DOM準備完了イベントが実際に発生します。したがって、DOM readyイベントはwindow.onloadイベントの前に発生します。 :) – jaywon