勉強記録（2024/09/07）チェックボックスとスクロール量で変化するバー

使用教材

https://www.sbcr.jp/product/4815615758/

職業訓練校で使用していたもの。
引き続きこちら。

勉強内容

チェックボックス

inputタグにdisabled属性を付けたら、疑似クラス「:disabled」で無効時の状態を指定できる。

:disabled - CSS: カスケーディングスタイルシート | MDN

疑似クラスもいっぱいあるので、少しずつ覚えていこう。

クリック時にイベントを発生させる

イベントを'change'でなく'click'にしたらどうなるか検証。

isAgreed.addEventListener('click', () => {
  console.log('チェックされました');
});

結果、ちゃんと出た。
実際に使う際にはこれだと不具合とかあるんだろうか？

Vue.js: チェックボックスのイベントにはclickではなくchangeを使う - Qiita

よくわかんない…。
しばらく調べてみたけど、ここ以外でそれっぽい説明してるところが見つからなかった。
とにかくclickではきちんと動かない可能性があるみたいなので、今はそこだけ覚えておこう。
ちなみにこれ↓でもtrueとfalseが出た。

isAgreed.addEventListener('click', () => {
  console.log(isAgreed.checked);
});

省略化

続き。if文で「チェックしたらdisabled（無効化）を無しに」「チェックを外したらdisabled（無効化）をありに」。
「===true」は省略可能。
あと「!==false」と意味は同じ。（こんな「裏の裏は表」みたいな書き方は基本しないだろうけど）
さらに、
「チェックがtrue　→　disabledをfalseに」
「チェックがfalse　→　disabledをtrueに」
なので、

isAgreed.addEventListener('change', () => {
  if(isAgreed.checked){
    btn.disabled = false;
  } else {
    btn.disabled = true;
  }
});

これが

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

こうなる。うおー。
これは多分いろんなところで使いそうだ。

スクロール量で変化するバー

残り。スクロール量で変化するバー。
scrollHeightとclientHeightがごっちゃになりそう。内容自体に複雑さはないんだけど、計算部分でちょっと考えちゃう。

用事があるので、今日の分はこれで終わり。