Add Javascript Array

2

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?

    
asked by anonymous 05.10.2015 / 23:26

3 answers

2

You must use .parseInt() to convert from Type < in> string to Type number .

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 that 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: link

    
05.10.2015 / 23:29
1

Try this here: If you add parseInt () in test [i] solves your problem.

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);      
        soma += parseInt(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>
    
05.10.2015 / 23:37
-2
    <div class="container">
        <div class="row">
            <div class="form-group col-md-3">
                <label>Produto</label>
                <input type="text" name="descricao_produto[]" id="descricao_produto" class="form-control">
            </div>
            <div class="form-group col-md-3">
                <label>Valor do Produto</label>
                <input type="number" name="valor_produto[]" id="valor_produto[]" class="form-control">
            </div>
            <div class="form-group col-md-2">
                <label>Quantidade</label>
                <input type="number" name="quantidade_produto[]" id="quantidade_produto[]" class="form-control">
            </div>
            <div class="form-group col-md-3">
                <label>Total Produto</label>
                <input type="number" class="form-control" name="produto_valor[]" id="produto_valor[]">

            </div>

            <div class="form-group col-md-1">

                <a class="btn btn-warning" id="produto_adiciona" >+</a>
            </div>
        </div>
<div id="produto_adicionado"></div>
        <div class="row">
            <div class="col-md-4">
            <p id="resultado"></p>
        </div>
        </div>
       <div class="row">
        <div class="form-group col-md-3">
         <input type="submit" class="btn btn-success" onclick="somarValores()">
       </div>
    </div>
    </div>
<!-- Javascript ---> 
<script type="text/javascript">

    $( "#produto_adiciona" ).click(function() {
  $( "#produto_adicionado" ).append( "<div class='row'><div class='form-group col-md-4'><input type='text' class='form-control' name='produto_valor[]'></div><div class='form-group col-md-1'><button class='btn btn-warning' id='produto_adiciona'>+</button>          </div></div>" );s
});



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

function somarValores(){
var soma = 0;


for (var i=0; i<quant.length; i++){

        teste[i] = parseInt(quant[i].value);      
        soma += parseInt(teste[i]);
 }  
  document.getElementById("resultado").innerHTML = soma;
}
    
18.10.2018 / 10:46