web-dev-qa-db-ja.com

JavaScript getElementByID（）が機能しない

次のJavaScriptコードでrefButtonがnullを取得するのはなぜですか？

<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>
javascriptgetelementbyid
26
user366312

関数を呼び出している時点では、ページの残りの部分はレンダリングされていないため、その時点では要素は存在していません。 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>
60
jaywon

JavaScriptを置く必要がありますbodyタグの最後に

まだDOMにないため、見つかりません！

次のようにonloadイベントハンドラでラップすることもできます。

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

スクリプトが実行されるとき、ブラウザはまだ<body>を解析していないので、指定されたIDを持つ要素があることを知らないためです。

代わりにこれを試してください：

<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 = ...の代わりにaddEventListenerを使用して、ドキュメント全体が解析された後にのみその関数を実行することもできます。

3
Bruno Reis