第3部 JavaScript — Day 23 / 30

DOM操作とイベント

<p id="message">まだ押されていません</p>
<button id="btn">押してね</button>

<script>
  const btn = document.getElementById("btn");
  btn.addEventListener("click", function () {
    document.getElementById("message").textContent = "押されました!";
  });
</script>

document.getElementById でHTMLの要素を取得し、textContent で中身を書き換えます。addEventListener("click", ...) は「クリックされたら実行する処理」の登録です。この組み合わせがWebアプリの基本になります。

今日の練習

押すたびにカウントが1ずつ増えるボタンに改造してみましょう。ヒント: let count = 0; を script の先頭に用意します。

模範解答を見る

let count = 0;

const btn = document.getElementById("btn");
btn.addEventListener("click", function () {
  count = count + 1;
  document.getElementById("message").textContent = count + "回押されました";
});

カウント用の変数 count をイベントの外で宣言しておき、クリックのたびに1増やして表示し直します。

理解度チェック

学籍番号と氏名を入力してクイズに正解すると、確認コード付きの提出用画面が表示されます。スクリーンショットを撮って Teams の Class Notebook に提出してください。

学籍番号氏名（フルネーム）

Q. 「クリックされたら実行する処理」を登録するのはどれでしょうか?

getElementById addEventListener textContent

Completed

正解です！Day 23 の学習を確認しました

科目	経営情報 2026
教材	プログラミング入門30日 Day 23 DOM操作とイベント
学籍番号
氏名
提出時間
確認コード

提出時間はサーバー時刻に基づきます。

この画面のスクリーンショットを撮り、Teams の Class Notebook に提出してください。