ベンド加工プロジェクトボタンを有効にする(無効)

突破機能：アイテムボタンをアクティブにする

購入品の価格送金が可能な場合、
アイテム購入ボタンをアクティブにする機能が追加されます.
また、アクティブ化を意識できるスタイルも追加されます.

disabled擬似クラス

まず、コーラアイテムボタンを無効にするために、disabledの医師レベルを使用します.
擬似クラス(仮想クラス)は、選択者に追加されたキーワードであり、選択された要素が満たされるには特殊な状態にある必要があります.たとえば、マウスがサスペンションされている場合(:サスペンション)、マウスボタンが押されている場合(:active)、フォームの入力欄がフォーカスされている場合(:focus)などです.disabledこの要素が非アクティブの場合、選択、クリック、入力ができず、フォーカスも得られない.disabledはboolianの属性で、指定すると自動的にtrueの値を持ち、JavaScriptを使用して属性値を制御できます.(関連情報源:mdn)
だから私たちは道具のボタンにdisabledと明記して、ボタンを無効にします.

<button
  class="cola__btn"
  data-item="Original Cola"
  data-count="5"
  data-price="1000"
	disabled
>

コーラの価格は1000元なので、購入できる最低金額は1000元です.
そして、送金額が1000元より大きい場合はdisabledにfalseを割り当ててボタンをアクティブにし、送金額が1000元より低い場合はtrueを割り当ててボタンの関数を無効にする.次にenabledというアクティブなスタイルクラスを作成し、送金額に基づいて加減コードを追加しました.

function doEnabled() {
  btnCola.forEach((item) => {
    if (sumDeposit >= 1000) {
      item.classList.add("enabled");
      item.disabled = false;
    } else {
      item.classList.remove("enabled");
      item.disabled = true;
    }
  });
}

📸 機能実装画面