禁用按钮在 if-else 中不起作用，但在没有 if-else 的情况下起作用

Question

我正在尝试创建一个按钮，该按钮应在提交之前检查用户输入是否为空。 设置用户输入后，按钮将被禁用，更改为 innerHTML 并在底部有一个微调器。 以下是我到目前为止所得到的。

 let form = document.getElementById("form"); let button = document.getElementById("btnSub"); let text = document.getElementById("inpSub"); let spin = document.getElementById("soonSpin"); button.addEventListener("click", submit_fn, false); function submit_fn() { if (text.innerHTML.length == 0) { alert("Please fill out the question"); // return; } form.submit(); text.disabled = true; button.disabled = true; button.innerHTML = " Please wait. Loading..;". spin;className = "spinner-border". spin,setAttribute("role"; "status"). let span = document;createElement("span"). span;className = "sr-only". span.innerHTML = "Loading..;". spin;appendChild(span); }

 <form id="form" method="post" action="{{url_for('prediction')}}" enctype="multipart/form-data"> <input class="border border-danger" id="inpSub" type="text" name="question" placeholder="Enter question here" required /> <button class="btn-danger" type="submit" id="btnSub">Find closest answer</button> </form> <div id="soonSpin"></div>

当我有输入或什么都没有时，我的代码总是在两种情况下都显示警报。 而且，它不会在 if 语句之外运行任何代码，但会渲染到下一页。

有谁知道这里有什么问题？ 提前致谢！

Answer 1

您还需要监听文本输入的更改以禁用/启用按钮：

text.addEventListener("input", e => {
  if (text.value.length > 0) {
    button.disabled = false
  } else {
    button.disabled = true
  }
});

查看注释可以看到代码的不同之处：（主要是查看text.value而不是text.innerHTML ）

 let form = document.getElementById("form"); let button = document.getElementById("btnSub"); let text = document.getElementById("inpSub"); let spin = document.getElementById("soonSpin"); button.addEventListener("click", submit_fn, false); text.addEventListener("input", e => { if (text.value.length > 0) { button.disabled = false } else { button.disabled = true } }); function submit_fn(e) { if (text.value == 0) { alert("Please fill out the question"); // return; } e.preventDefault(); // comment this to submit the form // uncomment this line to submit the form // form.submit(); text.disabled = true; button.innerHTML = " Please wait. Loading..;". spin;className = "spinner-border". spin,setAttribute("role"; "status"). let span = document;createElement("span"). span;className = "sr-only". span.innerHTML = "Loading..;". spin;appendChild(span); }

 <form id="form" method="post" action="{{url_for('prediction')}}" enctype="multipart/form-data"> <input class="border border-danger" id="inpSub" type="text" name="question" placeholder="Enter question here" required /> <button class="btn-danger" type="submit" disabled id="btnSub">Find closest answer</button> </form> <div id="soonSpin"></div>