Day17：イベント処理の練習問題
click イベントは「ユーザーの操作をきっかけに JavaScript を動かす」ための最重要機能です。
ここでは、Day17 の内容をしっかり定着させるために、段階的な練習問題と丁寧な解答・解説をまとめます。
基本問題：クリックで文字を変える
問題1：ボタンを押したら id=”msg” の文字を「クリックされました」に変更してください
次の HTML を前提とします。
<p id="msg">まだです</p>
<button id="btn">押す</button>
解答と解説
const msg = document.getElementById("msg");
const btn = document.getElementById("btn");
btn.addEventListener("click", () => {
msg.textContent = "クリックされました";
});
addEventListener(“click”) は「クリックされたらこの処理を実行してね」という“予約”です。
実際にクリックされた瞬間に、textContent が書き換わります。
基本問題：クリック回数をカウントする
問題2：ボタンを押すたびに「クリック回数: X」と表示してください
次の HTML を前提とします。
<h1 id="count">クリック回数: 0</h1>
<button id="btn">カウント</button>
解答と解説
const countElement = document.getElementById("count");
const btn = document.getElementById("btn");
let count = 0;
btn.addEventListener("click", () => {
count += 1;
countElement.textContent = `クリック回数: ${count}`;
});
click イベントは「状態（count）を変えるきっかけ」になります。
状態を更新し、その結果を DOM に反映するという流れが重要です。
応用問題：ON / OFF を切り替える
問題3：ボタンを押すたびに「ON」「OFF」を切り替えてください
次の HTML を前提とします。
<h1 id="status">OFF</h1>
<button id="toggle">切り替え</button>
解答と解説
const status = document.getElementById("status");
const toggle = document.getElementById("toggle");
let isOn = false;
toggle.addEventListener("click", () => {
isOn = !isOn;
if (isOn) {
status.textContent = "ON";
} else {
status.textContent = "OFF";
}
});
isOn = !isOn は true ⇄ false を反転させる書き方です。
クリックで状態を変え、その状態に応じて DOM を更新するという“イベント処理の基本形”が身につきます。
応用問題：クリックで新しい要素を追加する
問題4：ボタンを押すたびに「追加されました」という p 要素を追加してください
次の HTML を前提とします。
<button id="add">追加</button>
<div id="container"></div>
解答と解説
const add = document.getElementById("add");
const container = document.getElementById("container");
add.addEventListener("click", () => {
const p = document.createElement("p");
p.textContent = "追加されました";
container.appendChild(p);
});
click イベントと createElement / appendChild を組み合わせると、
「クリックで要素を増やす」動きが作れます。
これは Web アプリで非常によく使うパターンです。
実務寄り問題：入力欄の内容を追加する
問題5：入力欄の文字を p 要素として追加してください
次の HTML を前提とします。
<input id="text" type="text">
<button id="add">追加</button>
<div id="container"></div>
解答と解説
const text = document.getElementById("text");
const add = document.getElementById("add");
const container = document.getElementById("container");
add.addEventListener("click", () => {
const value = text.value;
if (value === "") {
return;
}
const p = document.createElement("p");
p.textContent = value;
container.appendChild(p);
text.value = "";
});
ユーザー入力を textContent に入れることで、
XSS（スクリプト注入）を防ぎ、安全に画面へ表示できます。
発展問題：複数のボタンで異なる動きをさせる
問題6：2つのボタンで異なるメッセージを表示してください
次の HTML を前提とします。
<h1 id="title">メッセージ</h1>
<button id="hello">こんにちは</button>
<button id="bye">さようなら</button>
解答と解説
const title = document.getElementById("title");
const hello = document.getElementById("hello");
const bye = document.getElementById("bye");
hello.addEventListener("click", () => {
title.textContent = "こんにちは！";
});
bye.addEventListener("click", () => {
title.textContent = "さようなら！";
});
click イベントは「どの要素に付けるか」で動きが変わります。
複数ボタンに別々のイベントを付けるのは、実務でも頻繁に使うパターンです。
セキュリティ・堅牢性問題：要素が存在しない場合の対処
問題7：id=”btn” が存在しない場合、エラーを出して処理を中断してください
次の HTML を前提とします。
<p id="msg">テスト</p>
解答と解説
const btn = document.getElementById("btn");
if (!btn) {
console.error("id=\"btn\" の要素が見つかりません。HTML を確認してください。");
} else {
btn.addEventListener("click", () => {
console.log("クリックされました");
});
}
DOM 操作では「要素が存在しない」ことがよくあります。
null のまま addEventListener を呼ぶとエラーになるため、
null チェックは安全なコードの基本です。
Day17 練習問題まとめ
今回の練習問題で、
click イベントの基本から応用までしっかり身につきます。
クリックで文字を変える
クリック回数をカウントする
ON / OFF の切り替え
クリックで要素を追加する
ユーザー入力を安全に扱う
複数ボタンのイベント処理
null チェックによる堅牢なコード
これらはすべて、Webアプリの基礎となる重要スキルです。