javascript - 清除输入事件 - HTML 和 JavaScript

Question

所以我有这段 HTML 和 JavaScript

function validate() {
    const tabs = document.getElementsByClassName("tab");
    const input = tabs[currentTab].querySelectorAll("input[type=tel], input[type=text], input[type=time], input[type=number], input[type=email]");
    const radio = tabs[currentTab].querySelectorAll("input[type=radio]");
    const select = tabs[currentTab].getElementsByTagName("select");
    let valid = true;
    if (radio.length == 0) {
        for (let i = 0; i < input.length; i++) {
            if (input[i].value == "") {
                valid = false;
                break;
            }
        }
        for (let i = 0; i < select.length; i++) {
            if (select[i].value == "") {
                valid = false;
                break;
            }
        }
    } else if (radio[0].name == "phnum" && radio[0].checked) {
        if (input[0].value == "" || input[1].value == "") {
            valid = false;
        }
    } else if (radio[1].name == "phnum" && radio[1].checked) {
        if (input[0].value == "" || input[1].value == "" || input[2].value == "") {
            valid = false;
        }
    }

    if (valid) {
        document.getElementById("next").className = "prevNext";
    }
}

    <span id="radio">
    	<label for="phnum1" class="radio-container">
    	  <input type="radio" name="phnum" id="phnum1" value="1" onchange="displayPhone(this);">1 Number
          <span class="radio"></span>
    	</label>
    	<label for="phnum2" class="radio-container">
    	  <input type="radio" name="phnum" id="phnum2" value="2" onchange="displayPhone(this);">2 Numbers
    	  <span class="radio"></span>
    	</label>
    	<label for="phnum3" class="radio-container">
    	  <input type="radio" name="phnum" id="phnum3" value="3" onchange="displayPhone(this);">3 Numbers
    	  <span class="radio"></span>
    	</label>
    </span>
   </p><br>
   <p id="ph1"  class="disable">
      <label for="phone-number1">Add a Phone Number: </label><input type="tel" name="phone-number1" id="phone-number1" class="input" placeholder="Add A Phone Number" required oninput="validate();">
   </p>
   <p id="ph2" class="disable">
      <label for="phone-number2">Add a Phone Number: </label><input type="tel" name="phone-number2" id="phone-number2" class="input" placeholder="Add A Phone Number" required onchange="validate();">
  </p>
  <p id="ph3" class="disable">
      <label for="phone-number3">Add a Phone Number: </label><input type="tel" name="phone-number3" id="phone-number3" class="input" placeholder="Add A Phone Number" required onchange="validate();">
  </p>

处理用户添加的输入，如果添加了所有必要的数据，则使按钮可点击。问题是当我使用后退箭头键(上面的输入键)在输入中删除时，即使激活条件不再适用，按钮仍然处于事件状态。谢谢你们的时间和帮助，我真的很感激。 :D

Answer 1

我看到的一件事 - 如果 valid == true 通过 document.getElementById("next").className = "prevNext"; 设置类名.

但是，如果 valid == false，您将无法在任何地方删除该类名。

这可能就是清空字段时您没有看到按钮消失的原因(如果我理解正确的话)。

if (!valid) { document.getElementById("next").className = ""; 是一种获取所需内容的快速而肮脏的方法。