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

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

OR

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 4

使用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 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

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

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

6 个答案:

解决方案：

代码：

演示：