Display sum in span

Question

I have a javascript code that sums the values of checkboxs selected and displays in a input. However, I would like to know how do I display the value in a span? Follow the code below:

 <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 ? parseFloat(atual.dataset.valor) : 0;
    }
    if (proximo.checked) {
      valor += parseFloat(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>

Answer 1

Create span element as:

<span id="totalSpan">0.00</span>

Change the line:

self.total = self.container.querySelector("input[name='total']");

To:

self.total = self.container.querySelector("#totalSpan");

Then change the line:

this.total.value = format;

To:

this.total.innerHTML = format;

Try this and pass feedback!

Answer 2

To put a value in a text field and not in an input, you have to use the $('idDoCampo').text(valorFinal) , or is the property text and not the val. I used the example in Jquery, now you just adapt.