如何重置年龄验证功能中的input输入框值？

嘿，这个问题很简单，我来给你捋清楚怎么重置id为age1的输入框的值！核心逻辑就是获取到这个输入框的DOM元素，然后把它的value属性设为空字符串""，下面给你几种实用的实现方式：

1. 添加独立的重置按钮（最直观） #

你可以给页面加一个专门的重置按钮，点击后不仅清空输入框，还能把结果提示也清空，用户体验更好：

<p>Input your age and click the button:</p>
<input id="age1" placeholder="type your age" />
<button onclick="ageVerify()">Verify the age</button>
<button onclick="resetAgeInput()">Reset Input</button>
<p id="demo1"></p>

<script>
function ageVerify() {
  var age1 = Number(document.getElementById("age1").value);
  var voteable;
  if (isNaN(age1)) {
    voteable = "Please type a number";
    // 可选：用户输入非数字时自动清空输入框
    document.getElementById("age1").value = "";
  } else {
    voteable = (age1 < 18)? "Too young":"Old enough";
  }
  document.getElementById("demo1").innerHTML = voteable;
}

// 专门的重置函数
function resetAgeInput() {
  // 清空输入框的值
  document.getElementById("age1").value = "";
  // 同时清空结果提示
  document.getElementById("demo1").innerHTML = "";
}
</script>

2. 验证完成后自动重置 #

如果你希望用户点击验证按钮后，不管结果如何都自动清空输入框，直接在ageVerify函数的末尾加上这行代码就行：

document.getElementById("age1").value = "";

修改后的验证函数会是这样：

function ageVerify() {
  var age1 = Number(document.getElementById("age1").value);
  var voteable;
  if (isNaN(age1) || document.getElementById("demo1").innerHTML == "") {
    voteable = "Please type a number";
  } else {
    voteable = (age1 < 18)? "Too young":"Old enough";
  }
  document.getElementById("demo1").innerHTML = voteable;
  // 验证后自动清空输入框
  document.getElementById("age1").value = "";
}

3. 用HTML原生表单重置（更简洁） #

如果把输入框和按钮放进<form>标签里，还能直接用原生的重置按钮，不用写额外的JS函数：

<form id="ageForm">
  <p>Input your age and click the button:</p>
  <input id="age1" placeholder="type your age" />
  <button type="button" onclick="ageVerify()">Verify the age</button>
  <button type="reset">Reset Input</button>
</form>
<p id="demo1"></p>

<script>
function ageVerify() {
  var age1 = Number(document.getElementById("age1").value);
  var voteable;
  if (isNaN(age1)) {
    voteable = "Please type a number";
  } else {
    voteable = (age1 < 18)? "Too young":"Old enough";
  }
  document.getElementById("demo1").innerHTML = voteable;
}
</script>

⚠️ 注意：这里的验证按钮一定要加type="button"，不然浏览器会默认把它当成提交按钮，点击后会刷新页面，导致之前的验证结果丢失。

不管哪种方式，核心都是那句document.getElementById("age1").value = ""，你可以根据自己的需求选择合适的触发时机哦！

内容的提问来源于stack exchange，提问作者Jun Jung