Добавление значений, поступающих от ввода в JS

Question

Когда я пытаюсь добавить несколько значений, они просто добавляются.

Это мои входные данные (все они выглядят одинаково):

<input type="number" id="floatOne" required>

Это мой сценарий:

<script>
function calcExactFloat(){
    var floats = new Array(document.getElementById("floatOne").value, document.getElementById("floatTwo").value,document.getElementById("floatThree").value,document.getElementById("floatFour").value,document.getElementById("floatFive").value,document.getElementById("floatSix").value,document.getElementById("floatSeven").value,document.getElementById("floatEight").value,document.getElementById("floatNine").value,document.getElementById("floatTen").value);

    var sum = 0;

    for(var i = 0; i < floats.length; ++i){
        sum = sum + floats[i];
        console.log(sum);
    }

javascript append addition

2

njoye 19 Дек 2015 в 21:25

Answer 1

Значение входных элементов, если строка, даже если эта строка представляет числовое значение. В JavaScript «добавление» строк приводит к конкатенации - ('1' + '1') === '11'.

Чтобы преобразовать строки в числа, самый простой способ - использовать + перед переменной - +a + +b.

Попробуйте вот так:

var sum = 0;

for(var i = 0; i < floats.length; ++i){
    sum = sum + +floats[i];
    console.log(sum);
}

1

Amit 19 Дек 2015 в 18:31

Answer 2

Значения, возвращаемые входными данными .value, рассматриваются как string, поэтому вы должны привести их к плавающему, после чего вы можете сделать расчет, поэтому замените следующую строку:

sum = sum + floats[i];

По :

sum = sum + parseFloat(floats[i]);

Надеюсь это поможет.

var floats = new Array(document.getElementById("floatOne").value, document.getElementById("floatTwo").value,document.getElementById("floatThree").value,document.getElementById("floatFour").value);

var sum = 0;

for(var i = 0; i < floats.length; ++i){
  sum = sum + parseFloat(floats[i]);
}

result.textContent = sum;

<input type="number" id="floatOne" value='10'>
<input type="number" id="floatTwo" value='10'>
<input type="number" id="floatThree" value='10'>
<input type="number" id="floatFour" value='10'>
<br/>
Result : <span id="result"></span>

2

Zakaria Acharki 19 Дек 2015 в 18:45

Answer 3

Вы должны использовать ParseFloat

function calcExactFloat(){
    var floats = new Array(document.getElementById("floatOne").value, document.getElementById("floatTwo").value,document.getElementById("floatThree").value,document.getElementById("floatFour").value,document.getElementById("floatFive").value,document.getElementById("floatSix").value,document.getElementById("floatSeven").value,document.getElementById("floatEight").value,document.getElementById("floatNine").value,document.getElementById("floatTen").value);

    var sum = 0;

    for(var i = 0; i < floats.length; i++){
	if(floats[i])
        sum = sum + parseFloat(floats[i]);
    }
	alert(sum)
	}

 <input type="number" id="floatOne" required><br />
	<input type="number" id="floatTwo" required><br />
	<input type="number" id="floatThree" required><br />
	<input type="number" id="floatFour" required><br />
	<input type="number" id="floatFive" required><br />
	<input type="number" id="floatSix" required><br />
     <input type="number" id="floatSeven" required><br />
	<input type="number" id="floatEight" required><br />
	<input type="number" id="floatNine" required><br />
	<input type="number" id="floatTen" required><br />
  <input type="button" value="Calc" onclick="calcExactFloat()" />

1

Suhail Keyjani 19 Дек 2015 в 18:39

Добавление значений, поступающих от ввода в JS

3 ответа

Похожие вопросы

Новые вопросы

javascript