将两个用户号码输入存储在变量中，验证为数字，并写入两位数的总和

Question

我有一个用 html 创建的表单，有两个输入字段和一个按钮。单击按钮时，我希望调用一个函数，然后将两个数字相加，然后通过警报功能显示总和。

我知道如何在单击按钮时调用该函数，并且我知道如何读取两个输入并将其存储在单独的变量中。

我想要一些关于如何以最简单的方式将输入验证为仅数字的提示？

function Calculate() {
  var num1 = document.getElementById("num1").value;

  var num2 = document.getElementById("num2").value;
  num1_parsed = parseInt(num1);    

  num2_parsed = parseInt(num2);

  if (num1_parsed) {    

  } else {
    alert("Wrong input!!!");
    return false;    
  }

  var total = num1_parsed + num2_parsed;
  alert("The total sum of your numbers are: " + sum);
}

此代码出于某种原因有效，如果 num1 正确但 num2 不正确，它会给出消息 NaN 而不是警报消息！

Answer 1

JavaScript 方法

通过 JavaScript 进行验证，您可以使用 isNaN() 函数。如果输入不是数字，这将返回 true。

function Calculate() 
{
  var num1 = document.getElementById("num1").value;
  var num2 = document.getElementById("num2").value;

  num1_parsed = parseFloat(num1);    
  num2_parsed = parseFloat(num2);

  if(isNaN(num1_parsed) || isNaN(num2_parsed))
  {
      alert("Wrong input!!!");
      return false;
  } else {
      var total= num1_parsed + num2_parsed;
      alert("The total sum of your numbers are: " + total);
      return true;
  }
}

HTML5 方法

此外，如果您只想使用 HTML5 来确保输入值是数字，那么您可以对输入标签使用 type="number" 属性。这会添加内置验证以拒绝非数字。

<input type="number" id="num1" />
<input type="number" id="num2" />

Answer 2

如果您可以将输入元素用作type="number"

num1_parsed = Number(num1);
num2_parsed = Number(num2);

if (isNaN(num1_parsed) || isNaN(num2_parsed) ) {
    alert("Wrong input!!!");
    return false;
} else {
    // do stuff
    return true;        
}

Answer 3

使用 isNaN() 函数。使用 || 可能更具可读性而不是 && 这将意味着结果将是错误的。

function Calculate() {

  var num1 = document.getElementById("num1").value;
  var num2 = document.getElementById("num2").value;
  
  num1_parsed = parseInt(num1);    
  num2_parsed = parseInt(num2);
  
  
 //console.log((!(isNaN(num1_parsed))).toString() + " " + num1_parsed);
 //console.log((!(isNaN(num2_parsed))).toString() +  " " + num2_parsed);

  if (!(isNaN(num1_parsed)) && !(isNaN(num2_parsed))){
  var total = num1_parsed + num2_parsed;
  alert("The total sum of your numbers are: " + total);
  
  } else {
alert("Wrong input!!!");
    return false;        
  }


}

<input id="num1" />
<input id="num2" />
<button onclick="Calculate()">Calculate</button>

Answer 4

HTML

<input type="number" id="num1" />
<input type="number" id="num2" />
<button onClick="Calculate()" type="button">Get Sum</button>

JS

function Calculate() {
  var num1 = document.getElementById("num1").value;

  var num2 = document.getElementById("num2").value;
  num1_parsed = parseFloat(num1);    

  num2_parsed = parseFloat(num2);

  if (isNaN(num1_parsed) || isNaN(num2_parsed) ) {    
     alert("Wrong input!!!");
     return false;    
  }

  var total = num1_parsed + num2_parsed;
  alert("The total sum of your numbers are: " + total);
}

或

function Calculate() {
  var num1 = document.getElementById("num1").value;

  var num2 = document.getElementById("num2").value;
  if( !num1 || !num2 ){
     alert("please enter values for num1 and num2");
  } 
  var total = eval(`${num1}+${num2}`);
  if( isNaN(total) ){
     alert("Wrong input!!!");
     return false;    
  }
  alert("The total sum of your numbers are: " + total);
}

Answer 5

解决方案：

您可以将map 与Number 结合使用来执行初始转换。之后使用reduce 可以给你total。然后您只需检查任何numbers 是否等于NaN。

---

代码：

  let num = (n) => document.getElementById("num" + n).value,
    total = (numbers = [num(1), num(2)].map(Number)).reduce((a, v) => a + v);

  if (numbers.some(Number.isNaN)) alert("wrong");
  else alert("The total sum of your numbers are: " + total);

注意：重要的是要意识到isNaN 和Number.isNaN 是不同的，有时会给出不同的结果。 Number.isNaN 专门查看一个值是否为number，以及该number type 是否为NaN。 isNaN 将强制提供的 value。 A.e. isNaN(undefined) 和 Number.isNaN(undefined) 分别返回 true 和 false。

---

演示：

function Calculate() {
  let num = (n) => document.getElementById("num" + n).value,
    total = (numbers = [num(1), num(2)].map(Number)).reduce((a, v) => a + v);

  if (numbers.some(Number.isNaN)) alert("wrong");
  else alert("The total sum of your numbers are: " + total);


}

document.querySelector("button").addEventListener("click", Calculate);

<input id="num1" value="34" />
<input id="num2" value="100" />
<hr/>
<button>Calculate</button>

Answer 6

从用户那里输入两个数字。将其存储在变量中并打印 两个数的和和乘积。