BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] JavaScriptのgetElementByID()が動作しない [重複] [重複

2022-03-02 13:49:48

質問

なぜ 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>

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します