Olá, estou com um problema, no código abaixo possuo uma tabela de produtos, onde os mesmos possuem um valor(R$) e um input para o cliente escolher uma quantidade. Preciso que quando o cliente altere a quantidade, a mesma seja multiplicada pelo valor do produto e seja mostrada no campo valor total (elemento no footer da página).
Está função já esta funcionando, porém, só para o primeiro item da lista de produtos, ou seja, a partir do momento que altero a quantidade do primeiro item, ela é multiplicada pelo valor e o campo valor total é atualizado, mas quando a quantidade do próximo é definida o campo valor total não é atualizado.
Não sei o que está errado, caso alguém puder ajudar, agradeço muito, segue código: Para economizar página, deixei de fora o cabeçalho onde faço referência aos arquivos JS e outros documentos.
Tabela: Produto Valor Quantidade
<tr id="produto">
<td><?=$produto['nomeProduto'] ?></td>
<td><div id="valor"><?=$produto['valorProduto']?></div></td>
<td>
<input id="quantidade" type="number" size="1" maxlength="2" max="10" min="0" step="0">
</td>
</tr>
<?php
endforeach;
?>
</table>
<footer>
<nav class="navbar navbar-default navbar-fixed-bottom">
<label> Total: </label>
<div id="total" class="navbar-right">
R$ 0,00
</div>
</nav>
</footer>
Funções:
function dinheiroTextoParaFloat(text) { //"Transofram" em float.
var limpaTexto = text.replace("R$", "").replace(",", ".");
return parseFloat(limpaTexto);
}
function floatParaDinheiroTexto(value) { //"Transforma" em texto.
var text = (value < 1 ? "0" : "") + Math.floor(value * 100);
text = "R$ " + text;
return text.substr(0, text.length - 2) + "," + text.substr(-2);
}
function leTotal() {
var total = $("#total").text(); //Le o texto do elemento com ID total.
return dinheiroTextoParaFloat(total); //Retorna o texto convertido em float.
}
function escreveTotal(value) {
var text = floatParaDinheiroTexto(value); //Armazena na variavel text o valor convertido em texto.
$("#total").text(text); //escreve o total no elemento com id total.
}
function calculaTotalProdutos(){
var produtos = $("#produto");
var totalProdutos = 0;
for (var cont = 0; cont < produtos.length; cont++){
var $produto = $(produtos[cont]);
var quantidade = dinheiroTextoParaFloat(
$produto.find("#quantidade").val());
var valor = dinheiroTextoParaFloat(
$produto.find("#valor").text());
var subtotal = quantidade * valor;
totalProdutos += subtotal;
}
return totalProdutos;
}
$(document).ready(function() {
$("#quantidade").change(function() {
escreveTotal(calculaTotalProdutos());
});