0

Galera tenho esse codigo em javascript que soma valores das checkboxes, por algum motivo ele só soma a primeira casa do valor, por exemplo, o valor é 1.75 ele soma somente 1.00, o codigo é esse.

 <script type="text/javascript">
          var containers = document.querySelectorAll("[data-calc]");

var Calculadora = function(container) {
  var self = this;
  self.container = container;

  self.hiddentotal = self.container.querySelector("input[name='hiddentotal']");
  self.total = self.container.querySelector("input[name='total']");
  self.tamanhos = [].slice.call(self.container.querySelectorAll("input[name='tamanho[]']"));
  self.asplos = [].slice.call(self.container.querySelectorAll("input[name='asplo[]']"));
  self.valores = [].slice.call(self.container.querySelectorAll("input[name='valor[]']"));

  var onChange = function (event) {
    self.onInputChange(event);  
  }

  this.tamanhos.forEach(function (tamanho, indice) {
    tamanho.addEventListener("change", onChange);
  });

    this.asplos.forEach(function (asplo, indice) {
    asplo.addEventListener("change", onChange);
  });

  this.valores.forEach(function (valor, indice) {
    valor.addEventListener("change", onChange);
  });
}

Calculadora.prototype.onInputChange = function (event) {
  //recuperando o valor do radio tamanho selecionado.
  var tamanho = this.tamanhos.filter(function (tamanho, indice) {
    return tamanho.checked
  })[0];  
  tamanho = tamanho ? parseFloat(tamanho.dataset.valor) : 0;


  var asplo = this.asplos.filter(function (asplo, indice) {
    return asplo.checked
  })[0];  
  asplo = asplo ? parseFloat(asplo.dataset.valor) : 0;

  //somando os valores selecionados.
  var valor = this.valores.reduce(function (atual, proximo, indice) {
    var valor = atual;
    if (atual instanceof HTMLElement) {
      valor = atual.checked ? parseInt(atual.dataset.valor) : 0;
    }
    if (proximo.checked) {
      valor += parseInt(proximo.dataset.valor)
    }
    return valor;
  });

  //não entendi o pq do seu total ser a soma do tamanho com os valores, mas isto já forge a parte tecnica.
  var total = tamanho + asplo + valor;

  //formando o total como currency.
  //este metodo não é suportado pelo IE abaixo do 11, assim como pelo Safari.
  //para os browsers acima citados, é necessario uar um Polyfill (sugestão: https://github.com/andyearnshaw/Intl.js)
  var format = total.toLocaleString("pt-BR", { style: 'currency', currency: 'BRL' });

  this.hiddentotal.value = total
  this.total.value = format;  
};

var calculadoras = [];
[].forEach.call(containers, function (container, indice) {
  var calculadora = new Calculadora(container);
  calculadoras.push(calculadora);
});
        </script>

no html está assim

    <label>
<input type="checkbox" name="valor[]" value="Valornumero1" data-valor="1.50" />
Valornumero1
</label>
4
  • 1
    Olhei rapidamente e não testei, mas na parte que soma você esta usando "parseInt" então quando você passa um valor fracionado também conhecido como "float" ele está arredondando seus valores é o que a função faz, então basta troca para "parseFloat" que deve funcionar.
    – SK15
    Commented 5/03/2016 às 21:38
  • po, valeu cara, funcionou certinho, não manjo muito de javascript mas agora to começando a entender a logica Commented 5/03/2016 às 21:47
  • @SK15 podes colocar uma resposta...
    – Sergio
    Commented 5/03/2016 às 22:16
  • como q poe como resposta? é vc q poe ou eu? Commented 5/03/2016 às 22:45

1 Resposta 1

1

Bem conforme eu já havia comentado e agora estou colocando como reposta, o problema do seu código é que você esta usando a função "parseInt" na hora da soma, sendo assim essa função do JavaScript faz com que todos dados passados por ela sejam transformados em números Inteiros não importando o tipo de dado seja String, Float ou Inteiros, fazendo com que afete sua soma, ainda mais caso use números fracionados, também conhecidos como Ponto flutuante (o que engloba Float, Double ou Real), sendo assim a solução era usar a função "parseFloat" para caso seja inseridos números 'quebrados' não afetasse a conta.

Um exemplo simples de como eles funcionam:

parseInt("10") // Entrada 10 String -> Saída 10 inteiro
parseInt("10.10") // Entrada 10.10 String -> Saida 10 Inteiro
parseInt(10) // Entrada 10 Inteiro -> Saída 10 Inteiro
parseInt(10.10) // Entrada 10.10 Float -> Saída 10 Inteiro

parseFloat("10") // Entrada 10 String -> Saída 10 inteiro
parseFloat("10.10") // Entrada 10.10 String -> Saida 10.10 Float
parseFloat(10) // Entrada 10 Inteiro -> Saída 10 Inteiro
parseFloat(10.10) // Entrada 10.10 Float -> Saída 10.10 Float

No seu código a parte que influencia é essa:

//somando os valores selecionados.
var valor = this.valores.reduce(function (atual, proximo, indice) {
var valor = atual;
if (atual instanceof HTMLElement) {
 // Linha antiga 
 // valor = atual.checked ? parseInt(atual.dataset.valor) : 0;

 // Linha nova corrigida
 valor = atual.checked ? parseFloat(atual.dataset.valor) : 0;
}
if (proximo.checked) {
 // Linha Antiga
 // valor += parseInt(proximo.dataset.valor)

 // Linha nova corrigida
 valor += parseFloat(proximo.dataset.valor)
}
 return valor;
});

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 .