Problem with decimal places

0

I have this code in javascript that adds values to the checkboxes, for some reason it only adds the first value, for example, the value is 1.75 it adds only 1.00, that's the code.

 <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 is thus

    <label>
<input type="checkbox" name="valor[]" value="Valornumero1" data-valor="1.50" />
Valornumero1
</label>
    
asked by anonymous 05.03.2016 / 22:21

1 answer

1

Well, as I mentioned before and now I am putting in the answer, the problem with your code is that you are using the " parseInt "at the time of the sum, so this JavaScript function causes all data passed by it to be transformed into numbers Floating point (which encompasses Float, Double or Real) , so the solution was to use the " parseFloat function" in case you enter 'broken' numbers does not affect the account.

A simple example of how they work:

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

In your code the influencing part is this:

//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;
});
    
06.03.2016 / 19:16