javascript - 禁用按钮在 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 语句之外运行任何代码，但会渲染到下一页。

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

标签： javascripthtml

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>