JavaScriptでカウンターを作る

JavaScriptでカウンターを作っていきます。

基本となるHTMLはこちら。index.htmlです。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>カウンター</title>
  </head>
  <body>
    <h1>カウンター</h1>
    <div id="num">0</div>
    <button id="btn">+</button>

    <script>
　　　// ここにJavaScriptを記述します。
    </script>
  </body>
</html>

ブラウザで開くとこんな感じです。

＋ボタンを押すと数字が増えていくようにします。まだ動きません。

JavaScriptもCSSと同じように、HTMLファイル内に書く方法と、外部ファイルに書いて読み込む方法があります。

今回はHTMLファイル内に書いていきます。
上のコードの<script>タグの中です。

最初にボタン要素を変数btnの中に抜き出します。
getElementById()の中の”btn”は、HTML内のid=”btn”と同一である必要があります。

const btn = document.getElementById("btn");

次に、btnにイベントリスナーを加えます。
今回は、「クリックするとこう動く」という記述をします。

btn.addEventListener("click", function () {
  // id="btn"のボタンを押すと、この中に書かれたファンクションが発動します。
})

ファンクションの中身を書いていきます。

let num = document.getElementById("num").innerText;

HTML内の、id=”num” の要素の中身のテキストを取り出して、変数numに入れます。
変数numは後で数字が変わるのでletを使っています。

num++;

numに1を加えます。num++ は num = num + 1 と同じです。

document.getElementById("num").innerText = num;

ファンクションの最後として、id=”num”の要素の中身のテキストを、先程数が増えたnumで置き換えます。

これでファンクションの記述も完了。

全体のコードを載せておきます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>カウンター</title>
  </head>
  <body>
    <h1>カウンター</h1>
    <div id="num">0</div>
    <button id="btn">+</button>

    <script>
      const btn = document.getElementById("btn");

      btn.addEventListener("click", function () {
        let num = document.getElementById("num").innerText;
        num++;
        document.getElementById("num").innerText = num;
      });
    </script>
  </body>
</html>

では、ブラウザで動作確認してみましょう。