Question

当我尝试在 html 上输入一些数字时，我在这里得到NaN值。我不知道为什么。

var firstNumber= document.getElementById("numberone").value;
var secondNumber = document.getElementById("numbertwo").value;

function addition(){
  var result = firstNumber + secondNumber;
  document.getElementById("equals").innerHTML = result;
}

function subtraction(){
  var result = firstNumber - secondNumber;
  document.getElementById("equals").innerHTML = result;
}

function multiplication(){
  var result = firstNumber * secondNumber;
  document.getElementById("equals").innerHTML = result;
}

Answer 1

您应该使用parseInt(value, base)解析输入中的值，其中value是输入值，并以数字数字系统为基础。

var firstNumber = parseInt(document.getElementById("numberone").value, 10);
var secondNumber = parseInt(document.getElementById("numbertwo").value, 10);

您可以在此处详细了解： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt

编辑：我假设您正在处理整数值，但您可以尝试parseFloat来处理浮点值，或者使用库来操作和格式化数字，例如Numeral.js

Answer 2

您的变量firstNumber和secondNumber在程序开始时设置一次（它们更可能只是空字符串，这两行输入尚未填充任何内容设置它们的代码被执行）。只要执行了依赖于这些值的某个函数，就应该获取值：

function getValue(id) {
    return +document.getElementById(id).value; // get the value of the input whose ID is id and convert the value to a number using unary +
} 

function addition(){
  var result = getValue("numberone") + getValue("numbertwo"); // use getValue here
  document.getElementById("equals").innerHTML = result;
}

function subtraction(){
  var result = getValue("numberone") - getValue("numbertwo"); // here two
  document.getElementById("equals").innerHTML = result;
}

//...

计算时获得NaN

2 个答案: