Некорректно работает калькулятор на js [дубликат]

138

20 марта 2019, 02:40

На данный вопрос уже ответили:

Вместо ответа появляется “[object HTMLParagraphElement][object HTMLParagraphElement]” 3 ответа

Сделал простенький калькулятор на js, всё работает нормально, кроме функции Сложить. Когда есть, например, 5+5, то получается не 10, а 55. Как это исправить?

function f1() { 
  var num1 = document.getElementById(`n1`).value; 
  var num2 = document.getElementById(`n2`).value; 
  var result = num1 * num2; 
  document.getElementById(`out`).innerHTML = result; 
} 
 
function f2() { 
  var num1 = document.getElementById(`n1`).value; 
  var num2 = document.getElementById(`n2`).value; 
  var result = num1 - num2; 
  document.getElementById(`out`).innerHTML = result; 
} 
 
function f3() { 
  var num1 = document.getElementById(`n1`).value; 
  var num2 = document.getElementById(`n2`).value; 
  var result = num1 + num2; 
  document.getElementById(`out`).innerHTML = result; 
} 
 
function f4() { 
  var num1 = document.getElementById(`n1`).value; 
  var num2 = document.getElementById(`n2`).value; 
  var result = num1 / num2; 
  document.getElementById(`out`).innerHTML = result; 
}

<p>Первое число:<input type="text" id="n1"></p> 
<p>Второе число:<input type="text" id="n2"></p> 
<button onclick="f1()">Умножить</button> 
<button onclick="f2()">Вычесть</button> 
<button onclick="f3()">Сложить</button> 
<button onclick="f4()">Разделить</button> 
<p id="out">Результат:</p>

Answer 1

Ты должен приводить все значения к типу Number.

var num1 = Number(document.getElementById(`n1`).value);
var num2 = Number(document.getElementById(`n2`).value);

Answer 2

Все значения полей в JS - строки. Нужно их привести в Integer. Это можно сделать такими способами:

var num1 = Number(document.getElementById(`n1`).value);
var num1 = parseInt(document.getElementById(`n1`).value);

Так же, в целях економии места (хахаха) можно пользоватся приведением типов:

var num1 = document.getElementById(`n1`).value * 1;
var num1 = document.getElementById(`n1`).value + 0;
var num1 = +document.getElementById(`n1`).value;