JavaScript | レベル別練習問題：エレメント（HTML要素・DOM要素操作）

では先ほど作成した「エレメント操作15問」のうち、上級問題の例を使ってステップ実行（変数・エレメント状態の逐次追跡） を作ります。
ここでは 問題15（ボタン動的生成＋クリックイベント） を対象にします。

問題15ステップ実行：5個のボタンを生成しクリックイベントを追加

let container = document.getElementById("container");
for (let i = 1; i <= 5; i++) {
    let btn = document.createElement("button");
    btn.textContent = `ボタン${i}`;
    btn.addEventListener("click", () => {
        alert(`ボタン${i}が押された`);
    });
    container.appendChild(btn);
}

let container = document.getElementById("container");
for (let i = 1; i <= 5; i++) {
    let btn = document.createElement("button");
    btn.textContent = `ボタン${i}`;
    btn.addEventListener("click", () => {
        alert(`ボタン${i}が押された`);
    });
    container.appendChild(btn);
}

ステップ実行（逐次追跡）

解説ポイント

1. ループでの動的生成
   • i = 1~5 までループしてボタン作成
   • document.createElement("button") で要素を生成
   • textContent でボタン名を設定
2. イベントの逐次登録
   • addEventListener でクリックイベント追加
   • アロー関数と let i により各ボタンで正しい番号が保持される（クロージャ）
3. DOM更新の逐次確認
   • container.innerHTML の変化で追加順を追える
   • イベント登録前後で DOM に追加されるタイミングも明確
4. 実務応用例
   • リストやカードを動的生成してイベント付与（Todoアプリ、商品一覧など）
   • クロージャを使うことでループ内で固有の状態を保持

💡 拡張ステップ表案

• 「クリックされたら alert 表示」という動作も逐次追跡可能
• 各ボタンごとに DOM状態・イベント状態・変数i の値をテーブル化してデバッグ可