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