HTML と JavaScript

JavaScript で何かしようと思ったとき、HTML との相性がとても良いです。
というわけで、HTML と JavaScript を連携させてみます。

<!DOCTYPE html>
<html lang="ja" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>counter</title>
        <!-- ページのデザインを外部ファイルにまとめるときは CSS を使うと良き -->
        <link rel="stylesheet" href="style.css">
        <!-- JavaScript の読み込み -->
        <script type="text/javascript" src="counter.js"></script>
         <!-- HTML ファイル、CSS ファイル、JavaScript ファイルは同じディレクトリ階層 -->
    </head>
    <body>
        <div class="wrap">
            <p>カウント:<span id="drawCount">0</span></p>
            <button type="button" id="countUpButton" name="button">+1</button>
            <button type="button" id="countDownButton" name="button">-1</button>
        </div>
    </body>
</html>

html {
    font-size: 16px;
}

.wrap {
    margin: auto;
    padding-top: 3rem;
    width: 99%;
    height: 100vh;
    background-color: #eeeeee;
    text-align: center;
}

button {
    margin: 1rem;
    min-width: 100px;
    color: #fff;
    background-color: #eb6100;
    border-bottom: 5px solid #b84c00;
    -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
    box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
}

button:hover {
    margin-top: 3px;
    color: #fff;
    background: #f56500;
    border-bottom: 2px solid #b84c00;
}
// ウィンドウが読み込まれたら実行する
window.onload = function() {
    // ボタンの id
    const countUpButtonId = 'countUpButton';
    const countUpDownButtonId = 'countDownButton';
    // ボタン
    const countUpButton = document.getElementById(countUpButtonId);
    const countUpDownButton = document.getElementById(countUpDownButtonId);
    // 描画先の id
    const drawCountAreaId = 'drawCount';
    // 描画先
    const drawCountArea = document.getElementById(drawCountAreaId);
    // 描画関数
    const drawCount = () => {
        drawCountArea.innerHTML = count;
    }
    // 押した回数
    let count = 0;
    // ボタンを押したときのリスナー
    countUpButton.addEventListener('click', () => {
        count ++;
        drawCount();
    });
    countUpDownButton.addEventListener('click', () => {
        count --;
        drawCount();
    });
}

簡易カウンターができました。
赤い車の数を数えてもいいですし、ポケモンの努力値調整に使ってもいいですね。

document.getElementById

document.getElementById(id)
とすることで、HTML 内にある id の要素を取得することができます。
つまり、HTML の要素に JavaScript からアクセスができるようになったということです！
ということで、HTML のボタン要素と描画する要素にアクセスして処理を追加してみます。

ちなみに、要素が見つからない場合は null が返ってきます。
*ウィンドウの読み込みが完了する前に実行すると、見つからないことがあります。
ここに書いてある通りですね。

addEventListener

addEventListener(type, listener)
とすることで、要素にイベントを追加することができます。
【イベント】とは、ボタンが左クリックされた時、ボタンの左クリックが離された時、などに発生するものです。(発火と呼ばれる)
～～～時、にあたるものが【イベント】= type です。
二つ目の引数にあたる、リスナー(listener) とはイベントが発生したときに何をするかを決めるものです。
言葉にするとわかりにくいですが、今回は、
type(click) : HTML のボタン要素がクリックされた時、
listener(function) : カウントを増やして、カウントを描画する。
ということをしています。
また、おまじないのように書いていた、

window.addEventlistener('onload', function() {
    console.log("読み込みが完了したら実行する");
});
window.addEventlistener('onload', () => {
    console.log("読み込みが完了したら実行する");
});

は、イベントでした。
() => {} は、 function() {} と、ほとんど・・・・同じ意味です。
読み込みが完了した時、リスナーを実行する。
と書くと、分かりやすいかもしれません。
ほとんど、ここに書いてある通りです。
イベントの種類(type)はここにたくさん載っています。

innerHTML

さて、ボタンを押して JavaScript 内では count と増やしたり減らしたりできるようになりました。
ということで、最後に HTML の方に描画してみましょう。
描画用の要素を取得して、innerHTML に描画します。

HTML と JavaScript

ということで、HTML と JavaScript の連携ができるようになりました。
基本的に、
HTML の読み込み完了 → JavaScript の実行
としていると、エラーの発生個所を特定しやすいです。
例えば、countDownButton(-1のボタン) が見つからない場合は、
counter.js:25 Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
at window.onload (counter.js:25:23)
なんて出てきます。
null に addEventListener なんてプロパティは見つからないよ！って怒ってます。
HTML 内の id と、JavaScript 内の id が一致していないことが原因です。
id を修正してあげましょう。
innerHTML は要素の内容を書き換えることができます。

スポンサーリンク