Question

我决定将此作为单独的问题发布，因为该主题与我的original post略有不同。我正在尝试建立一个简单的计算器，将人类的岁月转化为狗年。要求用户在表单中输入他们的年龄。然后他们点击一个按钮，他们在狗年的年龄显示在表格下方。

这一切都运行正常，但我现在正在尝试添加一个if语句以防止使用空字符串或数字0提交表单。目前，如果有人输入带有空字符串或零的表单然后点击按钮，他们被告知他们在狗年中是0。相反，我想要一条消息出现（同一个地方，在表单下），指示用户输入他们的年龄。

这是我到目前为止的代码：

HTML：

<div id="calculator">
      <form>
        <p>
        <label>What is your current age in human years?</p>
        <p><input type="text" id="humanYears"></label></p>
        <p>
        <button type="button" id="calculate">Calculate</button></p>
        <p>
        <span id="answer"></span>
        </p>
      </form>
    </div>

JS：

function calculateAge() {
  var humanYears = document.getElementById("humanYears").value;
    if (humanYears === 0 || "") {
      document.getElementById("answer").innerHTML = "Please enter your age in human years.";
      return;
    }

  var dogYears=humanYears * 7;

  document.getElementById("answer").innerHTML = "That means you are " + dogYears + " in dog years!";
}

document.getElementById("calculate").onclick = function() { calculateAge(); };

非常感谢任何帮助。

Answer 1

当使用或运算符||时，你仍然需要在两边添加完整的表达式，你还需要将数字0放在引号中，因为它被视为一个字符串，如下所示：

Working example

if (humanYears === "0" || humanYears === "") {
  document.getElementById("answer").innerHTML = "Please enter your age in human years.";
  return;
}

Answer 2

提出的解决方案可能仍有一些不足之处。例如，我可以输入一个字母，我可以输入多个空格tec。

var humanYears = document.getElementById("humanYears").value.trim();
    if (!humanYears || isNaN(humanYears)) {
      document.getElementById("answer").innerHTML = "Please enter your age in human years.";
      return;
    }

Answer 3

如果您想匹配范围（例如，1-999岁），您可以执行以下操作：

＆＃13;

function calculateAge() {
  var humanYears = document.getElementById("humanYears").value.trim();
    if (!humanYears.match(/^[1-9][0-9]?[0-9]?$/) || humanYears === '') {
      document.getElementById("answer").innerHTML = "Please enter your age in human years.";
      return;
    }

  var dogYears=humanYears * 7;

  document.getElementById("answer").innerHTML = "That means you are " + dogYears + " in dog years!";
}

document.getElementById("calculate").onclick = function() { calculateAge(); };

＆＃13;

<div id="calculator">
      <form>
        <p>
        <label>What is your current age in human years?</p>
        <p><input type="text" id="humanYears"></label></p>
        <p>
        <button type="button" id="calculate">Calculate</button></p>
        <p>
        <span id="answer"></span>
        </p>
      </form>
    </div>

＆＃13;

其他任何内容都会返回您的字符串"Please enter your age in human years."

Answer 4

你几乎拥有它！

执行document.getElementById("humanYears").value;时，它会返回一个字符串，而不是一个数字。

现在，当您执行if (humanYears === 0 || "")时，您需要将字符串与数字进行比较，这将返回false。只需将你的三等于两等于它就应该有效。 === - ＆gt; ==

希望这有帮助！

简单的JS计算器 - 为什么这个if语句不起作用？

4 个答案: