3

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>

Estou tentando somar um array javascript e retornar o total, mas ele apenas me mostra o array, sem soma...poderiam me ajudar?

4 Respostas 4

2

Tens de usar .parseInt() para converter de Tipo string para Tipo numero.

Quando tens quant[i].value isso vai retornar texto, não um numero. Assim tens de converter por exemplo "10" para 10.

Se verificares vais ver que typeof quant[i].value vai dar "string" e não "number".

Usa então:

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>

Podes também usar o .reduce() em vez do ciclo for.
Nesse caso ficaria assim:

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

2
  • Olá, quando coloco o parseInt, ele reconhece todos os campos como NaN, e se algum deles não estiver preenchido, não ocorre a soma.
    – Rocha
    Commented 5/10/2015 às 21:32
  • @Rocha sim, faz sentido. Podes usar parseInt(el.value, 10) || 0; para ele usar zero caso não tenha valor no input. Juntei iso na resposta também.
    – Sergio
    Commented 5/10/2015 às 21:36
1

Teste isso aqui: Se você adicionar o parseInt() no teste[i] resolve seu problema.

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>

-2
var array = ["1", "2", "3"]; // exemplo de uma array básico!

var soma = 0;

for (var x=0; x < array.length; x++) {

     soma += parseInt(array[x]);

}

// soma é igual a: 6
-3
    <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;
}
1
  • Não responda apenas com código. Explique o que a sua resposta pretende fazer para que seja facil de qualquer leitor seguir. Em relação ao código ele também não só não ficou corretamente formatado como parece ter ficado com algumas coisas perdidas a mais como por exemplo $( "#produto_adicionado" ).append( "+ " );s });
    – Isac
    Commented 18/10/2018 às 9:46

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .