I have a javascript code that sums the values of checkboxs
selected and displays in a input
. However, I'd like to know how do I display the value in a span
? Here is 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>