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

【问题标题】：How to disable and enable button in JavaScript如何在 JavaScript 中禁用和启用按钮
【发布时间】：2019-10-06 04:23:33
【问题描述】：

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

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

【问题讨论】：

将 html 添加到您的问题中
在哪一行 1. 当您将其分配为 true 2. 或。当你用 if 语句检查它时

标签： javascript

【解决方案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

【讨论】：

没有这样的代码。我想说的是，当使用 let button = document.querySelector('button') 选择顶部的按钮时。您可以使用此按钮变量。您的代码 => let e = document.querySelector('button').disabled = true;你可以改变 let e = button.disabled = true;

【解决方案2】：

您需要通过 id 获取按钮。

改变这个：

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

到这里：

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

记得将“ID_OF_BUTTON”更改为您放在按钮 html 上的 id。

【讨论】：

您可以使用 document.querySelector() 按标签名称进行选择。如果只有一个按钮，则不需要 id

【解决方案3】：

我认为在下面的代码中链接方法会导致问题：

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

解决方案：

1.首先获取按钮控件：

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

2.附加事件处理程序。

button.addEventListener('click',buttonClick);

【讨论】：