Javascript 如果输入为空，如何禁用html按钮？

我正在使用一个引导模式，允许用户在我的网站上发表评论。一切正常，只是如果输入为空，用户可以发表评论。如果输入为空，我想禁用该按钮

这是引导中的按钮模式

<button
  type="button"
  class="btn btn-dark"
  data-bs-toggle="modal"
  data-bs-target="#exampleModal"
  id="addComment"
>
  Add a comment
</button>

<!-- Modal -->
<div
  class="modal fade"
  id="exampleModal"
  tabindex="-1"
  aria-labelledby="exampleModalLabel"
  aria-hidden="true"
>
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Add a comment</h5>
      </div>
      <div class="modal-body">
        <div class="input-group mb-3">
          <input
            type="text"
            class="form-control"
            placeholder="Name"
            id="name"
            aria-describedby="basic-addon1"
          />
        </div>
        <div class="input-group mb-3">
          <input
            type="text"
            class="form-control"
            placeholder="Comment"
            id="comment"
            aria-describedby="basic-addon1"
          />
        </div>
      </div>
      <div class="modal-footer">
        <button
          type="button"
          class="btn btn-light"
          data-bs-dismiss="modal"
        >
          Cancel
        </button>
        <button
          type="button"
          class="btn btn-dark"
          data-bs-dismiss="modal"
          id="postButton"
          onclick="postComment()"
        >
          Comment
        </button>
      </div>
    </div>
  </div>
</div>

我在谷歌上搜索了bootstrap中是否有必填字段，甚至在两个输入中都添加了

required

，但这不起作用

我还尝试设置按钮属性

禁用

并使用上述代码，但没有成功

我试过更多的东西，但都不太管用。如上所述，如果输入为空，我需要禁用html按钮。感谢您的帮助

---

p.S我首先尝试一个输入，然后我将同时尝试两个输入

===>

---

然而，它认为，如果有人改变标签，他们可以输入什么。在这种情况下，只需检查值为nothing的帖子，并防止它们被放入数据库。

当按钮上发生

单击
事件时，您的尝试会将事件处理程序设置为
name
，并且所有这些都在
DOMContentLoaded
的处理程序中设置。这可以大大简化

如果移动
脚本
，使其恰好位于关闭
主体
标记之前，则不需要将代码嵌套在
domcontentloaded
事件处理程序中，因为当解析器到达该点时，DOM将被加载。接下来，您只需要设置一个
blur
事件处理程序（当字段失去焦点时触发）或
input
事件（每次字段的
值更改时触发），检查元素是否有内容，并相应地启用/禁用按钮

下面是一个例子：



启用/禁用提交
提交
const input1=document.querySelector（“#一”）；
const input2=document.querySelector（“#two”）；
const btn=document.querySelector（“按钮”）；
//对两个输入使用相同的验证处理程序
input1.addEventListener（“输入”，验证）；
input2.addEventListener（“输入”，验证）；
函数验证（）{
//检查输入是否为空
if（input1.value==“”| | input2.value==“”）{
btn.setAttribute（“禁用”、“禁用”）；
}否则{
btn.删除属性（“禁用”）；
}
}    
这里有几件事你做错了


在事件侦听器中有一个事件侦听器

每次单击
addbutton
，您都会为
name
分配一个新的事件侦听器，这是多余的。您必须将
name.addEventListener
移到外部

let name=document.getElementById（“名称”）；
name.addEventListener（“input”，（）=>{//也使用'input'而不是'change'`
如果（name.value.length>0）{
document.getElementById（“postButton”）.disabled=false；
}否则{
document.getElementById（“postButton”）.disabled=true；
}
});

注意到这里有些不同吗？我没有使用
“change”
而是使用了
“input”
，因为它会实时进行更改（当您键入时），而
“change”
会在您将焦点放在输入之外时触发

现在，当加载文档时，您必须禁用该按钮，您将被设置

另外，您可以将脚本放在HTML之后，然后像这样将
延迟
附加到脚本，而不是使用旧式的
onLoad
事件侦听器

<script defer>
// Your Javascript will be executed
// after all the html has been loaded
</script>


添加评论
添加评论
取消
评论
后指令的定义在哪里？按下按钮“
Comment
”时调用的内容。如果输入的长度>0，您可能应该在那里进行检查。如果输入为空，则我想禁用该按钮，而不是在我按下按钮时。问题是如果第一个输入为空，但第二个输入为空，则用户可以发布注释。这意味着可以单独提交第一个输入，但不能提交second@NabilTheCoder查看更新的答案。这只是让两个输入使用同一个处理程序并让处理程序检查两个输入的问题。非常感谢你，我真的很累，你帮了我。只是好奇如何使用
getElementById
和
querySelector
。哪一个更好？@NabilTheCoder不客气（别忘了投票并标记答案）。
getElementById
和
querySelector
之间没有太大区别，虽然从技术上讲，
getElementById
可能会稍微快一点，因为浏览器存储
id
的方式，但是在现代应用程序中，你不会注意到这么小的区别。好吧，伙计。再次感谢您的代码片段。这会很好地解释我的问题谢谢老兄，我有这个主意。你投了一票
<script defer>
// Your Javascript will be executed
// after all the html has been loaded
</script>