Как преобразовать в Number?

Question

[Владимир]

Доброго времени суток.

function show() {
    var perimetr_one = document.getElementById('perimetr_one').value;
    var perimetr_two = document.getElementById('perimetr_two').value;
    var perimetr_three = document.getElementById('perimetr_three').value;
    var perimetr_four = document.getElementById('perimetr_four').value;
    document.getElementById('perimetr').innerHTML = "Периметр равен:  " + +perimetr_one + +perimetr_two + +perimetr_three + +perimetr_four;
}

<input type="number" id="perimetr_one" placeholder="Введите сторону 'a'" />
<input type="number" id="perimetr_two" placeholder="Введите сторону 'b'" />
<input type="number" id="perimetr_three" placeholder="Введите сторону 'c'" />
<input type="number" id="perimetr_four" placeholder="Введите сторону 'd'" />
<input type="button" value="Посчитать" id="show-perimetr" onclick="show()" />
<p id="perimetr"></p>

При вводе чисел например "1" данный код выдаёт "Периметр равен: 1111". Происходит конкатенация. Как преобразовать данные которые вводятся в Number?

Answer 1

[Дмитрий Беляев]

Возьмите в скобки математические операции
операции в js обрабатываются слева направо, а у вас первый операнд - строка, поэтому и происходит конкатенация

document.getElementById('perimetr').innerHTML = "Периметр равен:  " + (+perimetr_one + +perimetr_two + +perimetr_three + +perimetr_four);

ну и как уже говорили выше, лучше использовать parseInt() и parseFloat() так как:
+'10px' -> NaN
parseInt('10px') -> 10

Comments

[Владимир]

Спасибо большое!

Answer 2

[crazyivan_ru]

Используйте функции parseInt() и parseFloat(), в зависимости от того целые или нет у вас числа.

Answer 3

[Дмитрий Ковальский]

при условии что там 101% находится цифра 
1*(document.getElementById('perimetr_one').value)

Или ParseInt(). Как вам больше нравится

Answer 4

[Андрей Minisol]

function show() {
	var perimetr_one = parseFloat(document.getElementById('perimetr_one').value);
	var perimetr_two = parseFloat(document.getElementById('perimetr_two').value);
	var perimetr_three = parseFloat(document.getElementById('perimetr_three').value);
	var perimetr_four = parseFloat(document.getElementById('perimetr_four').value);
	var result = perimetr_one + perimetr_two + perimetr_three + perimetr_four;
	document.getElementById('perimetr').innerHTML = "Периметр равен:  " + result;
}