ここまでの記事で「要素を探す」ところまで来ました。今回はそこに「操作されたら動く」を足します。この2つが組み合わさると、一気にページらしくなります。

書き方はいつも同じ形

script.js
対象.addEventListener("イベント名", function () {
  // 起きたときにやること
});

「誰が」「何をされたとき」「何をするか」の3点セットです。イベント名でよく使うのは click（押された）、input（入力された）、submit（送信された）あたりです。まずは click だけ覚えれば十分です。

CODE押すたびに数が増えるコードを書き換えると、すぐ下で動きます

count = count + 1 の 1 を 2 に変えると、増え方が変わります。プレビューのボタンを実際に押してみてください。

見た目の切り替えは class の付け外しで

「押したら開く」を作るとき、JavaScriptで高さや色を直接いじる必要はありません。開いた状態のCSSを先に用意しておき、JavaScriptは class を付け外しするだけにします。こうしておくと、見た目の調整はCSS側だけで完結します。

classList.toggle は「付いていなければ付ける、付いていれば外す」を1行でやってくれます。開閉の切り替えにはこれが最適です。

CODE押すと開くメニューコードを書き換えると、すぐ下で動きます

style.css の .is-open を書き換えると、開いたときの見た目だけを調整できます。JavaScript側は触りません。

押しても反応しないときの確認順

  • 検証ツールのコンソールに赤いエラーが出ていないか
  • 取得した対象が null になっていないか（id の綴り違い）
  • script タグに defer が付いているか
  • イベント名が間違っていないか（clik、onclick など）

この4つで、動かない原因のほとんどは見つかります。押すものは div ではなく button で作っておくと、キーボードからも操作できて確実です。