最新版！JavaScript入門講座 DOM入門 clickイベントを解説

WebサイトやWebサービスでよく見かける入力フォームですが、あれらをどのように制御しているかというと、そう、大体イベント処理です。

その中でも、送信ボタンなどで入力データを送っています。これがclickイベントになります。とてもよく使うのでしっかりと抑えておいた方がよいでしょう。そこで、初心者の方向けに、clickイベントについて解説していきます。

本記事のペルソナ

JavaScript初学者の方
プログラミング初学者の方
DOMを学びたい方
イベント処理を学びたい方

Clickイベント処理の解説
まとめ
参考文献

Clickイベント処理の解説

では、早速解説に入ります。今回は2つの例を用いて解説していきます。下記2つのファイルを用意して実行してみましょう。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width = device-width ,initial-scale = 1" />
        <meta name="robots" content="noindex,nofollow" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <title>
            JavaScript入門講座
        </title>
        <script>

        </script>
    </head>
    <body>
        <h1>DOM入門</h1>
        <div>
            <div id="js-submit-1">
                <label for="lab-ques1">
                    あなたが行ってみたい観光地は？
                </label>
                <input type="text" id="js-input-1" name="lab-ques1" placeholder="定山渓温泉" />
                <button type="submit" id="js-btn-1">クリック</button>
            </div>
            <div id="js-submit-2" style="margin: 10px 0px 10px 0px; padding:10px 0px 10px 0px;">
                背景が変わります。
                <div style="margin: 10px 0px 10px 0px;">
                    <button type="submit" id="js-btn-2">クリック</button>
                </div>
            </div>
        </div>
        <script src="script.js"></script>
    </body>
</html>


const doc = document;
const in1 = doc.getElementById("js-input-1");
const btn1 = doc.getElementById("js-btn-1");
const colorAry = ["#FFD489","#FFB64D","#FFE543","#C3FF43","#82FF43","#43FFAA","#5FFAFF","#5FBDFF","#5F6DFF"];
const bg = doc.getElementById("js-submit-2");

const btn2 = doc.getElementById("js-btn-2");

const onClickEvent1 = () => {
    console.log(`${in1.value}`);
}

const randomColor = () =>{
    let i = Math.floor(Math.random()*(colorAry.length+1));
    return colorAry[i];
}

const onClickEvent2 = () => {
    bg.style.backgroundColor = randomColor();
}


btn1.addEventListener("click",onClickEvent1);
btn2.addEventListener("click",onClickEvent2);

この例では2つのボタンがあり、それぞれ挙動が違います。
最初のフォームは、テキスト入力を行い、ボタンを押すとコンソールに入力した値が表示される最もシンプルなclickイベント処理になります。

次のフォームは単純に、ボタンを押すと次々と背景色が変わっていくのがわかるかと思います。これはランダムで配列に入っている色を決めてそれを返しています。これはDOMでスタイルを変えていく方法を掛け合わせています。

このように、ある動作を任意のタイミングで行わせたい、そんなときにクリックイベントが便利です。

次の例を見てみましょう。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width = device-width ,initial-scale = 1" />
        <meta name="robots" content="noindex,nofollow" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <title>
            JavaScript入門講座
        </title>
        <script>

        </script>
    </head>
    <body>
        <h1>DOM入門</h1>
        <div>
            <div id="js-submit-3">
                <label for="lab-ques2">
                    あなたが行ってみたい運用は？
                </label>
                <input type="text" id="js-input-2" name="lab-ques2" placeholder="銀行預金" />
                <button type="submit" id="js-btn-3">クリック</button>
            </div>
        </div>
        <script src="script.js"></script>
    </body>
</html>


const doc = document;
const bg = doc.getElementById("js-submit-2");

const btn3 = doc.getElementById("js-btn-3");



const onClickEvent3 = () =>{
    if(in2.value === null || in2.value === ""){
        confirm("値が入力されていません");
    }else{
        console.log(in2.value);
    }
}

btn3.addEventListener("click",onClickEvent3);

この例は先ほどと同様、クリックボタンを押すと、コンソールに文字が出力されるものです。しかし、一部機能を追加していますね。

これは、何も入力せず、クリックするとconfirmモーダルが現れるようにしています。これだけで、結構それっぽい挙動になっているのではないでしょうか？

実際webサービスにはこういったユーザに対して意図していないような挙動をするとユーザに対して注意を促すといったようなUXがあります。
これ以外にも、例えば背景の色を変えたり、赤文字で警告したりなどいろいろと応用できると思いますので試してみてください。これまでのDOM講座の知識で実装できると思います。