простая HTML-форма с добавлением двух чисел

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

Если это математическое сложение, вы просто забыли проанализировать значения в 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>

Это добавит числа, то есть математически, а не объединит значения строк, как вы уже видели.

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

Если вам нужно объединить значения, которые вам просто нужно использовать, toString() вот так

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