如何在JavaScript中禁用和启用按钮

我目前正在构建一个购物清单应用程序，其中包含一个表单、输入框和提交按钮。我的目标是允许用户在表单中输入值，直到页面上列出了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>

输入新项目：
添加项

---

我继续在控制台上收到一条错误消息，说明“无法读取未定义的属性已禁用”。

我认为您应该更改这行代码

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

对这个

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

然后，您可以将其禁用或不禁用，而无需再次选择它

button.disabled = true or button.disabled = false

---

您需要通过id获取您的按钮

更改此项：

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

为此：

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

---

请记住将“按钮的ID”更改为按钮html上的ID。

我认为在下面的代码中链接该方法是导致问题的原因：

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

解决方案：

1.首先获取按钮控件：

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

2.附上活动手册

button.addEventListener('click',buttonClick);

---

在问题的第1行添加html。当您将其指定为true 2时。或使用if语句检查时，可以使用document.querySelector（）按标记名进行选择。如果只有一个按钮，则不需要id。没有此类代码。我想说的是，当用let button=document.querySelector（“按钮”）选择顶部的按钮时。您可以使用此按钮变量。您的代码=>让e=document.querySelector（'button'）。disabled=true；您可以更改let e=button.disabled=true；