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