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 = ""; }是一种快速而肮脏的方法，可以满足您的需求。

清除输入事件 - HTML和JavaScript

1 个答案: