Не работает калькулятор?

Question

[Rufix]

Вроде бы простой код, но не пойму почему не работает.

<input id="first" type="text">
<input id="second" type="text">
<br>
<br>
<button id="plus">Сложить</button>
<button id="minus">Убавить</button>
<button id="umn">Умножить</button>
<button id="razd">Разделить</button>

var first = document.getElementById('first').value;
var second = document.getElementById('second').value;


var plus = document.getElementById('plus').onclick = function (){
	var sum = first + second;
	alert(sum);
}

Ввожу в два поля числа, а мне alert выводит пустоту.

Answer 1

[Владимир Проскурин]

1) Вы считаете значение first и second в начале загрузки страницы, когда поля еще пустые. И при клике берете эти пустые значения, а не получаете из поля снова.
2) Получаемые значения из полей являются строками, их нужно преобразовывать в числа.

var plus = document.getElementById('plus').onclick = function (){
  var first = parseInt(document.getElementById('first').value);
  var second = parseInt(document.getElementById('second').value);
  var sum = first + second;
  alert(sum);
}

Comments

[alex-1917]

они еще и невидимы были, эти две злосчастные переменные)) вот что значит насрать на джиквери и лепить горбатого на ванильке... тьфу!!

Answer 2

[alex-1917]

в любой непонятной ситуации юзай джиквери!
не слушай никого, кто говорит, что ванильный JS идеален!
да, но не для начинашек!

$('#plus').click(function() {
  var sum = parseInt($('#first').val()) + parseInt($('#second').val());
  alert(sum);
});