HTMLでカウンターを作成する方法：GoodとBadボタンで数字を増減させる

この記事では、HTMLとJavaScriptを使って、GoodボタンとBadボタンを押すことで、数字が増減するカウンターを作成する方法を紹介します。基本的なHTML構造と簡単なJavaScriptのコードを使って、数字をリアルタイムで変更できる仕組みを実装します。

1. HTML構造の準備
2. JavaScriptで数字を操作する
3. ボタンを押すと数字が変わる仕組み
4. 完成したカウンターの実装
5. まとめ

1. HTML構造の準備

まず最初に、HTMLの基本構造を作成します。カウンターの表示には、<p>タグに「count」というクラス名を設定します。このクラス名を使って、後でJavaScriptで値を操作します。

<p class="count">0</p>
<button id="goodButton">Good</button>
<button id="badButton">Bad</button>

2. JavaScriptで数字を操作する

次に、JavaScriptを使ってボタンが押された時にカウンターの数字を増減させる処理を追加します。以下のコードでは、Goodボタンが押されたときに数字が+1、Badボタンが押されたときに数字が-1されるようになっています。

document.getElementById("goodButton").addEventListener("click", function() {
    var count = document.querySelector(".count");
    count.innerText = parseInt(count.innerText) + 1;
});

document.getElementById("badButton").addEventListener("click", function() {
    var count = document.querySelector(".count");
    count.innerText = parseInt(count.innerText) - 1;
});

3. ボタンを押すと数字が変わる仕組み

上記のコードでは、addEventListenerメソッドを使ってボタンがクリックされたときの処理を設定しています。Goodボタンをクリックすると、現在のカウンターの値に1を加算し、Badボタンをクリックすると1を減算します。ボタンのクリックごとにカウンターの表示が更新される仕組みです。

4. 完成したカウンターの実装

これで、GoodボタンとBadボタンを押すことで、カウンターが増減するシンプルな機能が実装できました。以下のコードをHTMLファイルに貼り付けて、実際に動作を確認してみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>カウンターアプリ</title>
</head>
<body>
    <p class="count">0</p>
    <button id="goodButton">Good</button>
    <button id="badButton">Bad</button>

    <script>
        document.getElementById("goodButton").addEventListener("click", function() {
            var count = document.querySelector(".count");
            count.innerText = parseInt(count.innerText) + 1;
        });

        document.getElementById("badButton").addEventListener("click", function() {
            var count = document.querySelector(".count");
            count.innerText = parseInt(count.innerText) - 1;
        });
    </script>
</body>
</html>