AI AIワークナビ AI Work Studio
メニュー
AIワークナビ ホーム

JavaScriptでカウンターを作る｜クリックで増減・リセットする基本

記事

結論

JavaScriptでカウンターを作るときは、現在の数をlet count = 0で保存し、ボタンを押すたびに値を更新してから画面へ表示します。

この記事では、+1、-1、リセットの3ボタンを作ります。数値を保存する変数、クリックイベント、textContentによる表示更新を一度に練習できます。0より小さくならない条件も加えるため、初めての小さなアプリに向いています。

発生している問題

次の例は、ボタンを押すと表示が1になります。しかし、2回押しても1のままです。

<button id="addButton" type="button">+1</button>
<p id="count">0</p>
const addButton = document.querySelector("#addButton");
const count = document.querySelector("#count");

addButton.addEventListener("click", () => {
  count.textContent = "1";
});

ローカルChromeとAI Work Studioで確認した結果は、0 → 1 → 1でした。クリック回数を記憶せず、毎回同じ文字列を代入しているためです。

原因

画面の0は表示であり、計算に使う状態ではありません。増え続けるカウンターには、現在値を保存する変数が必要です。

addEventListener()は、指定したイベントが対象へ届いたときに関数を呼びます。クリックのたびに変数を変更し、その後で表示を更新すれば、値と画面を一致させられます。

修正前コード

修正前はイベント内でcount.textContent = "1"を実行するだけです。現在値を読み取って1を足す処理がないので、何回押しても結果は変わりません。

修正後コード

HTMLには表示欄と3つのボタンを用意します。type="button"を付けると、フォーム内へ移した場合も送信ボタンとして動くのを防げます。

<main class="counter-card">
  <h1>かんたんカウンター</h1>
  <p id="count" aria-live="polite">0</p>
  <div class="buttons">
    <button id="subtractButton" type="button">-1</button>
    <button id="resetButton" type="button">リセット</button>
    <button id="addButton" type="button">+1</button>
  </div>
</main>

CSSで中央へ配置し、数字とボタンを見やすくします。

body {
  font-family: sans-serif;
  padding: 24px;
}

.counter-card {
  max-width: 360px;
  margin: 0 auto;
  text-align: center;
}

#count {
  font-size: 3rem;
  font-weight: 700;
}

.buttons {
  display: flex;
  justify-content: center;
  gap: 8px;
}

button {
  padding: 10px 16px;
  cursor: pointer;
}

JavaScriptでは、数値のcountと表示要素のcountDisplayを分けます。値を変えたらrenderCount()を呼ぶのがポイントです。

countは計算のためのデータ、countDisplayは画面にあるHTML要素です。同じ「カウント」という役割でも名前を分けると、どちらを変更しているか読み違えにくくなります。renderCount()では数値をString()で文字列へ変換してから表示しています。

let count = 0;

const countDisplay = document.querySelector("#count");
const addButton = document.querySelector("#addButton");
const subtractButton = document.querySelector("#subtractButton");
const resetButton = document.querySelector("#resetButton");

function renderCount() {
  countDisplay.textContent = String(count);
}

addButton.addEventListener("click", () => {
  count += 1;
  renderCount();
});

subtractButton.addEventListener("click", () => {
  if (count > 0) {
    count -= 1;
    renderCount();
  }
});

resetButton.addEventListener("click", () => {
  count = 0;
  renderCount();
});

renderCount();

最後のrenderCount()は、ページを開いた直後の表示を変数の値とそろえるために実行します。今回はHTML側も0なので見た目は変わりませんが、初期値を5へ変更したときもJavaScript側の値が確実に表示されます。

表示欄のaria-live="polite"は、値の変化を支援技術へ穏やかに通知するための指定です。カウンターの計算には影響しませんが、画面を見ずに操作する利用者にも変化が伝わりやすくなります。

実行結果

ローカルChromeと公開中AI Work Studioの両方で、次の順番が一致しました。

初期表示: 0
+1を1回: 1
+1を2回: 2
-1を1回: 1
リセット: 0
0で-1を押す: 0

AI Work StudioのPreviewに3ボタンが表示され、Consoleの警告とエラーはありませんでした。

よくある間違い

countをconstで宣言する

countはクリックのたびに再代入するため、constではなくletで宣言します。一方、ボタンや表示要素の参照は同じ要素を使い続けるのでconstで問題ありません。

値だけ変更して表示を更新しない

count += 1だけでは画面の文字は変わりません。値を変更した後にrenderCount()を呼び、textContentへ新しい値を入れます。

増やす、減らす、リセットする各処理で同じ表示更新を書く代わりに、関数へまとめておくと修正場所が1か所になります。あとで単位やメッセージを加える場合にも便利です。

0でも引き続ける

0未満を許可しないカウンターなら、if (count > 0)の中で減算します。条件を外すと負の数にもできますが、今回は人数や個数を想定して0を下限にしています。

AI Work Studioで試す手順

  1. AI Work Studioを開きます。
  2. index.html、style.css、script.jsへ上の3コードを貼ります。
  3. HTMLを選び、プレビューを実行を押します。
  4. +1を2回押して2、-1を1回押して1になることを確認します。
  5. リセットを押し、0で-1を押しても0のままか確認します。
  6. Consoleを開き、警告やエラーがないことを確認します。

まとめ

カウンターでは、現在値を変数に保存し、クリックイベントで更新し、表示用の関数で画面へ反映します。この3段階を分けると、増減ボタンが増えても処理を追いやすくなります。

まずは増える数を2に変える、上限を10にする、リセット時に確認文を出す、といった変更をAI Work Studioで試してみてください。

関連記事

公式情報