1

Possuo um código em javascript que soma os valores de checkboxs selecionados e exibe em um input. Porém, eu gostaria de saber como faço para exibir o valor em um span? Segue o código abaixo:

 <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>
1
  • Uma das formas que sempre utilizo é pegar o elemento (span) e dar um .textContent e setar o valor.
    – user43646
    5/04/2016 às 11:17

2 Respostas 2

2

Crie o elemento span como:

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

Altere a linha:

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

Para:

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

Depois altere a linha:

this.total.value = format;

Para:

this.total.innerHTML = format;

Tente assim e passe feedback!

0

Para colocar um valor em um campo texto e não em um input, você tem que usar o $('idDoCampo').text(valorFinal) , ou seja a propriedade text e não a val. Usei o exemplo em Jquery, agora é só você adaptar.

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 .