如何在 JavaScript 中禁用和啟用按鈕

Question

我目前正在構建一個包含表單、輸入框和提交按鈕的購物清單應用程序。 我的目標是允許用戶在表單中輸入值，直到頁面上列出了 6 個項目； 達到 6 后，我想禁用該按鈕，以便無法添加更多值。 但是，如果用戶刪除了一個項目（例如，列表減少到 5 個項目），我希望啟用該按鈕，直到它達到 6，然后再次繼續相同的例程。

我嘗試使用一個數組和一個“if else if 語句”來指定條件，但這沒有奏效。 下面是我嘗試過的JS代碼。

let items = [];

      let list = document.querySelector('ul');

      let input = document.querySelector('input');
      let button = document.querySelector('button').addEventListener('click', buttonClick);

    function buttonClick() {

    let myItem = input.value;

    console.log(items)

    items.push(input.value);

    input.value = '';



    if (items.length === 6) {

     let e = document.querySelector('button').disabled = true;

     items.length = 0;

    } else if (button.disabled === false) {

      button.disabled = true;

    }

這是 HTML

<img src='img/paper.jpg'>


<div class='second'>
  <label for="item">Enter a new item:</label>
  <input type="text" name="item" id="item">
  <button>Add item</button>
</div>
<ul>

</ul>
</div>

我繼續在控制台上收到一條錯誤消息，指出“無法讀取已禁用未定義的屬性”。

Answer 1

我認為您應該更改這行代碼

let button = document.querySelector('button').addEventListener('click', buttonClick);

對這個

let button = document.querySelector('button');
button = .addEventListener('click', buttonClick);

然后您可以禁用或不禁用它而無需再次選擇它

button.disabled = true or button.disabled = false

Answer 2

您需要通過 id 獲取按鈕。

改變這個：

 let e = document.querySelector('button').disabled = true;

對此：

document.getElementById("ID_OF_BUTTON").disabled = true;

請記住將“ID_OF_BUTTON”更改為您放在按鈕 html 上的 id。

Answer 3

我認為在下面的代碼中鏈接該方法會導致問題：

let button = document.querySelector('button').addEventListener('click', buttonClick);

解決方案：

1.首先獲取按鈕控件：

let button=document.querySelector('button');

2.附加事件處理程序。

button.addEventListener('click',buttonClick);