@consul_akihiro (Akihiro Ogawa)posted at 2024-04-03

JavaScript addEventListenerを使った警告メッセージが出るボタンの作り方について

Q&A

解決したいこと

ボタンを押すとalertに書いてあるメッセージが表示されるようにしたい。

例）
JavaScriptでボタンを押すとメッセージが警告メッセージとして出されるをつくっています。
ボタンをクリックしても警告メッセージが出ません。
解決方法を教えて下さい。

発生している問題・エラー

特になし

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>クリックボタン</title>
        <script>
            let btn = document.getElementById('btn');
            btn.addEventListener('click', function() {
                window.alert("クリックされたよ!");
            }, false);
        </script>
    </head>
    <body>
    <h1>クリックボタン</h1>
    <button id="btn">表示</button>
    <button id="btn2" onclick="click();">CLICK</button>
    </div>
    </body>
</html>

自分で試したこと

ボタンのIDを「btn」と「btn2」の2つに分けました。

3Answer

@SurferOnWww posted at 2024-04-03

よくある間違いの一つですが、質問のコードの let btn = document.getElementById('btn'); が実行される時点では、<button id="btn">表示</button> がまだ存在しないのです。

ブラウザのディベロッパーツールを開いてその Console タブを見てください。エラーが出ているはずです。Source タブでソースを表示してリロードすると、どこでエラーが出ているか分かると思います。スクリプトが期待通り動かない場合は、まずそういうことをやってみましょう。

1Like

@nak435 posted at 2024-04-03

scriptを書く位置を変えただけです。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>クリックボタン</title>
    </head>
    <body>
    <h1>クリックボタン</h1>
    <button id="btn">表示</button>
    <button id="btn2" onclick="click();">CLICK</button>
    </div>
    <script>
        let btn = document.getElementById('btn');
        btn.addEventListener('click', function() {
            window.alert("クリックされたよ!");
        }, false);
    </script>
</body>
</html>

0Like

Comments

@nak435

click()だと動きませんね。doClick()に変えました。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>クリックボタン</title>
    </head>
    <body>
    <h1>クリックボタン</h1>
    <button id="btn">表示</button>
    <button id="btn2" onclick="doClick();">CLICK</button>
    </div>
    <script>
        let btn = document.getElementById('btn');
        btn.addEventListener('click', function() {
            window.alert("クリックされたよ!");
        }, false);
        function doClick() {
            alert("btn2クリックされたよ!");
        }
    </script>
</body>
</html>

@consul_akihiro
Questioner
回答ありがとうございます。
どうしてHeadの中にsprictを書くのはダメで、bodyの中にsprictを書くのは大丈夫なんでしょうか?
解説よろしくお願いします。

@Zust8241 posted at 2024-04-04

お世話になります。　まず解決法からですが、

１．window.addEventListener("load", () => {行いたい処理})と変更
２．操作したい要素の後にJavaScriptの記載する
かなと思います　個人的には１番目がおすすめです。

以下解説

まず全体としてなぜうまくいかないのか

<button id="btn">表示</button>　の生成前に
let btn = document.getElementById('btn')　が実行されてしまっているからです。
　
DOM要素のパース（処理）中にJavaScriptも実行されており、
<button id="btn">表示</button>　のパース前に
let btn = document.getElementById('btn')　が実行されてしまったわけです。
　
そうすると、document.getElementById('btn')　には何も存在しない（null）のため
btnはnullとなり、後続の、btn.addEventListenerがエラーを起こします。
このときのエラーが
Cannot read properties of null (reading 'addEventListener')
となります（properties of null　つまり　内容が存在しない）

解決法

１．パースが終わるまで待つ
２．必要要素のパース完了後にJavaScriptを実行する
　
１．についてはまずwindowの内容（これにはDOM要素が含まれています）
が読み込まれてから内部の関数を実行します。
そのため、<button id="btn">表示</button>の存在が保証され
let btn = document.getElementById('btn')　が正常に動きます
DOM要素全部用意できてから、内部の関数を実行してね　ということです
　
２．についてはHTMLというのは記載順（上から下）にパースされます
そのため必要要素のパースが完了しているので
必然的に　let btn = document.getElementById('btn')　が正常に動きます
関数を実行時には対象の要素があるぞ　というわけです

0Like

Comments

@Zust8241

説明した内容を適応したHTMLを添付しておきますね
問題なく動く・・・はず！

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>クリックボタン</title>
        <script>
            //１．パースが終わるまで待つ
            window.addEventListener("load", () => {
                const btn = document.getElementById('btn');
                const btn2 = document.getElementById('btn2');
                const listener =
                btn.addEventListener('click',  function() {  
                window.alert("表示がクリックされたよ!");
            } , false);
                btn2.addEventListener('click',  function() {  
                window.alert("CLICKがクリックされたよ!");
            }, false);
        });
        </script>
    </head>
    <body>
    <h1>クリックボタン</h1>
    <button id="btn">表示</button>
    <button id="btn2">CLICK</button>
    <button id="btn3">くりっく</button>
    <script>
        //２．必要要素のパース完了後にJavaScriptを実行する
        const btn3 = document.getElementById('btn3');
        btn3.addEventListener('click',  function() {  
            window.alert("くりっくがクリックされたよ!");
        });
    </script>
    </body>
</html>

@consul_akihiro
Questioner
返信ありがとうございます。
私はDOM操作が苦手なのでそこを克服していきたいです。
@Zust8241
複雑ですからねぇ・・・
今回の場合は、window.addEventListener("load")
（DOMは生成後じゃないと操作できない）とか
パース順序（HTMLは上から下に解釈される）とかいきなり出てきましたからね・・・
その知識の不足のため、解決法が見つからなかったという感じでしょうから
　
それでも克服には、色々試すのが一番だと思いますね
F12を押してディベロッパーツールを出し、エラーがないかを探したり
console.log()を使用して変数が正常な値かを確かめたりしておくと
色々情報の量が増えて、解決しやすくなると思いますよ！
　　
今回の場合も
「　Cannot read properties of null (reading 'addEventListener')　」
と出ていたので、properties of null（プロパティがnull）と絞り込めるので
なぜnullになるのか、という疑問に代わると思います
そうすれば　「addEventListener null」　で検索すれば
解決策が出てきたりします
　
後は勉強を続ければおのずと、点と点が紐づいてバッとわかる時が来るように
なると思います！　めげずに頑張ってください！
自由に操作できるようになると楽しいですよ！

もし疑問・問題等、解決していた場合はクローズお願いします！

Are you sure you want to delete the question?

JavaScript addEventListenerを使った警告メッセージが出るボタンの作り方について

解決したいこと

発生している問題・エラー

HTML

自分で試したこと

3Answer

Comments

以下解説

まず全体としてなぜうまくいかないのか

解決法

Comments

Your answer might help someone💌