Adding values coming from input in js

Question

When I try to add several values, they just get appended.

These are my inputs (They all look the same):

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

This is my script:

<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);
    }

I think you have to parset to number sum=sum+parseFloat(floats[i]) — Suhail Keyjani
– Suhail Keyjani, Commented Dec 19, 2015 at 18:29

Zakaria Acharki · Accepted Answer · 2015-12-19 18:45:56Z

2

Values returned from inputs by .value are considered as string so you should to cast them to float then you can make calculation, so replace the following line :

sum = sum + floats[i];

By :

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

Hope this helps.

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>

edited Dec 19, 2015 at 18:45

answered Dec 19, 2015 at 18:27

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Amit · Accepted Answer · 2015-12-19 18:31:04Z

1

The value of input elements if a string, even if that string represent a numerical value. In JavaScript, an "addition" of strings results in concatenation - ('1' + '1') === '11'.

On order to convert the strings to numbers, the simplest way is to use a + before the variable - +a + +b.

Try like this:

var sum = 0;

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

answered Dec 19, 2015 at 18:31

Amit

46.4k9 gold badges83 silver badges113 bronze badges

Comments

Suhail Keyjani · Accepted Answer · 2015-12-19 18:39:07Z

you have to use 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()" />

Collectives™ on Stack Overflow

Adding values coming from input in js

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related