最新版！JavaScript入門講座ーDOM入門 changeイベントをわかりやすく解説

前回は、ユーザが文字や数字などを入力したときに発生する、Inputイベント処理について解説しました。このイベント処理は実は様々な応用方法があり、実装したいwebの機能を簡単に実現できます。今回は、また別のイベント処理である、Changeイベントについてわかりやすく解説していきます。

本記事のペルソナ

JavaScript初学者の方
DOMを学びたい方・学んでいる方
DOMのイベント処理を学びたい方
Changeイベントを学びたい方

Changeイベントの解説:addEventListener
まとめ
参考文献

Changeイベントの解説:addEventListener

では、changeイベントの解説に入ります。changeイベントはInputイベントなどと同様に、ユーザの操作によって実行される処理となります。
詳細は下記記事を参考にしてほしいですが、基本的にこの処理は標準で実装されているメソッドを使用します。

皆さんが普段使用しているTwitterやYoutubeのようなWebアプリにはボタンを押したり、文字を入力したりする機能が与えられています。その時、様々な動作がwebでなされています。それらはもちろん、JavaScriptによるD...

changeイベント例1:select

では早速解説に入ります。最初に解説する例として、HTMLのプルダウンメニューを使ったDOMでの事例です。
下記のようなHTMLファイルをまず最初に用意しましょう。

<!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>
            <label for="lab-select">
                あなたの出身はどこですか? : 
            </label>
            <select id="js-select">
                <option id="pref1">北海道</option>
                <option id="pref2">青森</option>
                <option id="pref3">長崎</option>
                <option id="pref4">宮城</option>
                <option id="pref5">京都</option>
                <option id="pref6">長野</option>
                <option id="pref7">福岡</option>
                <option id="pref8">奈良</option>
                <option id="pref9">大阪</option>
            </select>
        </div>
        <script src="script.js"></script>
    </body>
</html>

const doc = document;
const contry = doc.getElementById("js-select");


const onChangeEvent1 = () => {
    console.log(`${contry.value}`);
}


contry.addEventListener("change",onChangeEvent1);

JSファイルは上記のようになります。
こちらは特別複雑ではなく、シンプルで、メニューの項目を変えるたびにコンソールに表示されていくプログラムです。

addEventListenerは第一引数を変えるだけで様々な挙動に対応するメソッドになります。これはInput処理でも出てきましたね。

changeイベント例2:checkbox

続いて、HTMLでのチェックボックスを使った例を解説していきます。チェックボックスはアンケートなどで複数回答するときなどに使うわれますね。

<!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>
            <p id="question">
                興味のある技術はなんですか？
            </p>
            <input type="checkbox" class="cb" id="js-cb1" name="tech" value="TypeScript"> 
            <label for="tech1">
                TypeScript
            </label>
            <input type="checkbox" class="cb" id="js-cb2" name="tech" value="Rest API">
            <label for="tech2">
                 Rest API
            </label>
            <input type="checkbox" class="cb" id="js-cb3" name="tech" value="QraphQL">
            <label for="tech3">
                 GraphQL
            </label>
            <input type="checkbox" class="cb" id="js-cb4" name="tech" value="Rust">
            <label for="tech4">
                 Rust 
            </label>
            <input type="checkbox" class="cb" id="js-cb5" name="tech" value="Go lang">
            <label for="tech5">
                 Go lang
            </label>
        </div>
        <script src="script.js"></script>
    </body>
</html>

const doc = document;
const checkboxes = doc.getElementsByClassName("cb");


const onChangeEvent2 = () =>{
    console.log(" ------- ");
    for(let i = 0;i < checkboxes.length;i++){
        if(checkboxes[i].checked){
            console.log(checkboxes[i].value);
        }
    }
    console.log(" ------- ");
}



for(let cb of checkboxes){
    cb.addEventListener("change",onChangeEvent2);
}

このプログラムも先ほどと同様、チェックボックスに変化があった場合、チェックがついている項目すべてを出力するプログラムになります。先ほどとは違い、イベント時に処理が実行されるメソッド内が多少増えたことでしょうか。

まず、それぞれチェックボックスは独立していますので、すべてのチェックボックスのDOMを取得します。複数のDOMを取得できるよう、クラス名から取得します。

すると、配列が取得されます。あとは、ループですべての要素に対してイベント処理を付加します。これで、どのチェックボックスがクリックされてもイベント処理が実行されるようになります。

値を取ってくるためには、valueを使います。このvalueというものは、HTMLのinputタグのvalue要素と一緒になります。ここが一致していなければなりません。

changeイベント例:radio

最後に、radioボタンを使った例を解説していきます。

<!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>
                <p id="question">
                    あなたの資産の中でもっとも割合が高いのは？
                </p>
                <input type="radio" class="radio" id="js-rd1" name="asset" value="株式"> 
                <label for="tech1">
                    株式
                </label>
                <input type="radio" class="radio" id="js-rd2" name="asset" value="投資信託">
                <label for="tech2">
                    投資信託
                </label>
                <input type="radio" class="radio" id="js-rd3" name="asset" value="金">
                <label for="tech3">
                    金
                </label>
                <input type="radio" class="radio" id="js-rd4" name="asset" value="外貨預金">
                <label for="tech4">
                    外貨預金
                </label>
                <input type="radio" class="radio" id="js-rd5" name="asset" value="不動産">
                <label for="tech5">
                    不動産
                </label>
                <input type="radio" class="radio" id="js-rd6" name="asset" value="暗号資産">
                <label for="tech5">
                    暗号資産
                </label>
                <input type="radio" class="radio" id="js-rd7" name="asset" value="債権">
                <label for="tech5">
                    債権
                </label>
            </div>
            <div id="js-msgbg">
                <p class="msg" id="js-msg"></p>
            </div>
        </div>
        <script src="script.js"></script>
    </body>
</html>

const doc = document;

const radioes = doc.getElementsByClassName("radio");
const msg = doc.getElementById("js-msg");
const bg = doc.getElementById("js-msgbg");


const onChangeEvent3 = () =>{
    let checkValue;
    for(let i = 0;i < radioes.length;i++){
        if(radioes[i].checked){
            checkValue = radioes[i].value;
        }
    }

    msg.innerHTML = checkValue;
    if(checkValue === "株式"){
        msg.style.backgroundColor = "#99ffff";
    }else if(checkValue === "債権"){
        msg.style.backgroundColor = "#ff9999";
    }else if(checkValue === "不動産"){
        msg.style.backgroundColor = "#66cccc";
    }else if(checkValue === "投資信託"){
        msg.style.backgroundColor = "#ffcc66";
    }else if(checkValue === "金"){
        msg.style.backgroundColor = "#cccc00";
    }else if(checkValue === "外貨預金"){
        msg.style.backgroundColor = "#33ff33";
    }else{
        msg.style.backgroundColor = "#ff99ff";
    }
}

for(let rd of radioes){
    rd.addEventListener("change",onChangeEvent3);
}

今回はradioボタンですので、どれか1つを選ぶ形になります。解説に入ります。

先ほどと同じく、radioボタンを押すと、選択されている値が取得されます。その次に、radioボタン下のpタグに値を表示するのと、背景の色を値によって変わるプログラムです。

これについては、テキストを書き換えたのち、IF文でそれぞれ機械的に分岐させています。