简单的HTMLform加两个数字

Question

尝试制作一个简单的形式，将两个数字相加。

输入两个值并运行程序后，结果均为原始值。

例如，当添加2和3时我得到32，当添加3和5时我得到35。 >

function add() {
  var numOne = document.getElementById("numberOne").value;
  var numTwo = document.getElementById("numberTwo").value;
  document.getElementById("result").innerHTML = numOne + numTwo;
}

<form>
  Number One <input type="text" id="numberOne" /> Number Two <input type="text" id="numberTwo" />
  <input type="button" value="add" onClick="add()">
</form>
<span id="result"></span>

Answer 1

如果您想要连接值，则只需使用toString()这样的

var numOne = document.getElementById("numberOne").value.toString();
var numTwo = document.getElementById("numberTwo").value.toString();

Answer 2

看起来它们以字符串而不是整数的形式读入。在字符串上使用add运算符时，它们将字符串连接在一起，因此得到结果（3 + 5 = 35）。相反，如果两个变量都是整数，则结果将相加（3 + 5 = 8）。 Javascript具有一个称为parseint（）的内置函数，该函数会将字符串转换为整数。

Answer 3

这应该有效：

var result = parseInt(numOne) + parseInt(numTwo);
document.getElementById("result").innerHTML = result;

无论何时使用 document.getElementById（“ someId”）。value ，它都会以字符串形式获取字段的值，因此您需要对其进行解析。

Answer 4

如果这是数学加法，您只是忘记了将值解析为int。

function add() {
  var numOne = document.getElementById("numberOne").value;
  var numTwo = document.getElementById("numberTwo").value;
  document.getElementById("result").innerHTML = parseInt(numOne) + parseInt (numTwo);
}

<form>
  Number One <input type="text" id="numberOne" /> Number Two <input type="text" id="numberTwo" />
  <input type="button" value="add" onClick="add()">
</form>
<span id="result"></span>

这将在数​​学上相加数字，而不是像您所经历的那样将字符串值连接起来。