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

我有一个用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，而不是警报消息

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来确保输入值是number，那么您可以对输入标记使用type=“number”属性。这将添加内置验证以拒绝非数字数字

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

---

如果可以将输入元素用作

type=“number”

HTML

或

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

函数计算（）{
var num1=document.getElementById（“num1”）.value；
var num2=document.getElementById（“num2”）.value；
num1_parsed=parseInt（num1）；
num2_parsed=parseInt（num2）；
//console.log（！（isNaN（num1_解析））.toString（）+“”+num1_解析）；
//console.log（！（isNaN（num2_解析））.toString（）+“”+num2_解析）；
if（！（isNaN（num1_解析））&&（！（isNaN（num2_解析）））{
var total=num1_已解析+num2_已解析；
警报（“您的号码总数为：“+total”）；
}否则{
警告（“输入错误！！！”；
返回false；
}
}

计算

解决方案： 您可以将

map

与

Number

结合使用来执行初始变换。然后使用

reduce

可以得到

总数

。然后，您只需检查任何

数字

是否等于

NaN

---

代码： 注意：必须认识到，

isNaN

和

Number.isNaN

是不同的，有时会给出不同的结果

Number.isNaN

专门查看值是否为

Number

，以及该

Number类型是否为
NaN
isNaN
将强制提供的
值
。A.e.
isNaN（未定义）
和
Number。isNaN（未定义）
分别返回
true
和
false


演示：

函数计算（）{
让num=（n）=>document.getElementById（“num”+n）.value，
总数=（数字=[num（1），num（2）]。映射（数字））。减少（（a，v）=>a+v）；
if（Number.some（Number.isNaN））警报（“错误”）；
else alert（“您的数字总和为：“+total”）；
}
document.querySelector（“按钮”）.addEventListener（“单击”，计算）


计算
从用户处输入两个数字。将其存储在变量中并打印
两个数字的总和和乘积。
如果值不是a，则反向逻辑
isNaN
返回truenumber@ZohirSalak哎呀！我怀疑正确实现javascript验证是这里的实际课程目标。仍然需要将值转换为数字。A
type=“number”
仍然返回字符串值yes，如果num1或num2为空怎么办？如果任何num为空，parseFloat将返回“NaN”objective如果其中一个值为空，eval将返回另一个值，您可以在eval之前添加检查。这是一个看起来更像学术作品而不是技术作品的问题。我们很乐意帮助你。为了提高您获得答案的机会，以下是一些提示：
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;        
}

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

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

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