Somar Array Javascript

Question:

var quant = document.getElementsByName("valor[]");
var teste = [];

function somarValores(){
var soma = 0;

 
for (var i=0; i<quant.length; i++){
  
   		teste[i] = quant[i].value;      
        soma += teste[i];
 }  
  document.getElementById("resultado").innerHTML = soma;
}
<label>Valor 1:</label>
        <input name="valor[]" type="number"/>
        <label>Valor 2: </label>
        <input name="valor[]" type="number"/>
        <label>Valor 03: </label>
        <input name="valor[]" type="number"/>
        <label>Valor 04: </label>
        <input name="valor[]" type="number"/>
      <input type="button" onClick="somarValores()" value="botao">

<p id="resultado"></p>

I'm trying to add a javascript array and return the total, but it just shows me the array, no sum… could you help me?

Answer:

You have to use .parseInt() to convert from String Type to Number Type.

When you have quant[i].value this will return text, not a number. So you have to convert for example "10" to 10 .

If you check you will see that typeof quant[i].value will give "string" and not "number" .

Then use:

teste[i] = parseInt(quant[i].value, 10);     
var quant = document.getElementsByName("valor[]");
var teste = [];

function somarValores(){
var soma = 0;

 
for (var i=0; i<quant.length; i++){
   		teste[i] = parseInt(quant[i].value, 10) || 0;      
        soma += teste[i];
 }  
  document.getElementById("resultado").innerHTML = soma;
}
<label>Valor 1:</label>
        <input name="valor[]" type="number"/>
        <label>Valor 2: </label>
        <input name="valor[]" type="number"/>
        <label>Valor 03: </label>
        <input name="valor[]" type="number"/>
        <label>Valor 04: </label>
        <input name="valor[]" type="number"/>
      <input type="button" onClick="somarValores()" value="botao">

<p id="resultado"></p>

You can also use .reduce() instead of the for loop.
In this case it would look like this:

function somarValores() {
    var soma = [].reduce.call(quant, function (somatorio, el) {
        return somatorio + parseInt(el.value, 10) || 0;
    }, 0);
    document.getElementById("resultado").innerHTML = soma;
}

jsFiddle: http://jsfiddle.net/yuqfgga2/1

Scroll to Top