MasterGerold
@MasterGerold

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

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

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?
  • Вопрос задан
  • 567 просмотров
Решения вопроса 1
bingo347
@bingo347 Куратор тега JavaScript
Crazy on performance...
Возьмите в скобки математические операции
операции в js обрабатываются слева направо, а у вас первый операнд - строка, поэтому и происходит конкатенация
document.getElementById('perimetr').innerHTML = "Периметр равен:  " + (+perimetr_one + +perimetr_two + +perimetr_three + +perimetr_four);

ну и как уже говорили выше, лучше использовать parseInt() и parseFloat() так как:
+'10px' -> NaN
parseInt('10px') -> 10
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
@crazyivan_ru
Не забывайте отметить решением, если ответ помог!
Используйте функции parseInt() и parseFloat(), в зависимости от того целые или нет у вас числа.
Ответ написан
Комментировать
@dmitryKovalskiy
программист средней руки
при условии что там 101% находится цифра 
1*(document.getElementById('perimetr_one').value)

Или ParseInt(). Как вам больше нравится
Ответ написан
Комментировать
@AmadeyMinisol
full stack web-developer
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;
}
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы