Problem with decimal places

Question

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

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

in html is like this

    <label>
<input type="checkbox" name="valor[]" value="Valornumero1" data-valor="1.50" />
Valornumero1
</label>

Answer 1

Well as I had already commented and now I am putting as response, the problem of your code is that you are using the function "parseint" at the time of the sum, so this Javascript function causes all data passed through it to be transformed into numbers Whole no matter what type of data is String, Float or Integers, causing it to affect its sum, even more if you use fractionated numbers, also known as Floating point (which includes Float, Double or Real), so the solution was to use the function "parseFloat" if 'broken' numbers are entered 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 part that influences 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;
});