如何重置输入值

Question

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;
}

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

你好。当我玩弄条件（tenary）函数时，我发现了它有趣的一面以及它的局限性。现在，如果用户没有输入数字或任何内容，他们会收到一条消息 "Please type a number." 并且取决于他们输入的是 18 岁以上还是 18 岁以下，他们将收到 "Too young":"Old enough"。

一切都很好，直到我发现当我在输入数字后尝试用空输入再次验证年龄时，innerHTML ("Too young") 不会消失或被 "Please type a number" 取代当我不输入任何内容时。如果我不事先输入数字，它会起作用，但一旦我输入数字，消息就不会消失。有没有办法循环函数？我希望我解释清楚了。

感谢您的阅读。

Answer 1

发生的情况是您在第一个 if 语句中测试了错误的值。由于您正在使用 Number(document.getElementById("age1").value) 将 age1 转换为数字，因此空输入永远不会是 NaN，而是 0。并且由于该值已经设置，因此也不会通过。这就是为什么它不会变回您想要的文本的原因。

此外，如果您设置元素的文本，最好使用 .textContent 而不是 .innerHTML

尝试改用下面的代码片段。

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

<p>Input your age and click the button:</p>

<input id="age1" placeholder="type your age" />
<button onclick="ageVerify()">Verify the age</button>

<p id="demo1"></p>

Answer 2

请将您的 Javascript 功能改成这个。

function ageVerify() {
            var age1 = Number(document.getElementById("age1").value);

            var voteable;
            if (isNaN(age1) || document.getElementById("age1").value=="") {
                voteable = "Please type a number";
            } else {
                voteable = (age1 < 18) ? "Too young" : "Old enough";
            }
            document.getElementById("demo1").innerHTML = voteable;
            return false;
        }

如何重置输入值

How to reset input value

html

javascript

ternary