JavaScriptの復習④

はじめに

今回は、前回に引き続き、Chapter4のCSSとJavaScriptを組み合わせた、要素の非表示と切り替えについて復習していきます。

チェックしたらクリックできるボタン

See the Pen チェックしたらクリックできるボタン by Uka Suzuki (@uukasuzuki_) on CodePen.

全体のコード解説

<input id="btn" type="submit" value="送信する" disabled />

#btn {
  background: #0bd;
  padding: 0.75rem 1rem;
  cursor: pointer;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  width: 150px;
}

#btn:disabled {
  background: #ccc; /* 無効状態では背景をグレーにする */
}

• disabledとは、HTMLの属性です。ボタンやフォーム要素が「無効状態」であることを指定するために使われます。この属性を持つ要素は、ユーザーが操作できなくなり、CSSを使ってその状態にスタイルを適用することができます。

• 一方、CSSにはdisabledという疑似クラスがあります。これは、HTML要素にdisabled属性が設定されている状態に対してスタイルを指定するために使用されます。上記の例では、disabled属性が設定されたボタンの背景色がグレーになり、文字の色が薄く設定されます。

JavaScriptのコード解説

const isAgreed = document.querySelector("#check");
const btn = document.querySelector("#btn");

isAgreed.addEventListener("change", () => {
  btn.disabled = !isAgreed.checked;
});

• document.querySelector("#check")は、HTMLのid="check"がついている要素（ここではチェックボックス）を取得します。変数isAgreedにその要素を代入します。

• document.querySelector("#btn")では、id="btn"のついたボタン要素を取得し、変数btnに代入します。

• isAgreed.addEventListener("change", ...)は、チェックボックスにchangeイベントを設定します。これは、チェックボックスの状態が変わったときに（チェックされた、または外された）実行されます。

btn.disabled = !isAgreed.checked;

• btn.disabledは、ボタンが無効 (disabled) かどうかを指定するプロパティです。trueにするとボタンは無効になり、クリックできなくなります。

• isAgreed.checkedとは、チェックボックスがチェックされているかどうかを確認するプロパティです。trueならチェックされており、falseならチェックされていません。

まとめ

今回は、CSSと組み合わせたJavaScriptの切り替えを学びました。次回は、ページスクロールの仕組みについて、まとめていきます。