Hello everyone, here is a way to modify a following script: when I run the code below, I have a system where I click on the + on the right side, which adds up the value below, everything works fine ... I would like to know if it would be possible to display below the product name and quantity as you add in the + or - in addition to the total, I do not know anything about javascript a friend that made this code for me does anyone help with this modification?
total = 0.00;
function adiciona(id)
{
calcula(id,"adicao");
}
function remove(id)
{
calcula(id,"subtracao");
}
function calcula(id,operacao)
{
nomeid = "nome"+id;
precoid = "preco"+id;
qtdid = "qtd"+id;
nome = document.getElementById(nomeid).innerHTML;
preco = document.getElementById(precoid).innerHTML;
preco = textoParaFloat(preco);
qtd = document.getElementById(qtdid).innerHTML;
qtd = parseInt(qtd);
//Debug
//alert("Produto: " + nome + "\n Preço: " + preco);
if(operacao=="adicao")
{
total = total + preco;
qtd = qtd + 1;
}
else
{
total = total - preco;
qtd = qtd - 1;
}
document.getElementById(qtdid).innerHTML = qtd;
document.getElementById("total").innerHTML = floatParaTexto(total);
}
// Converte [valor texto com vírgula para centavos] para [float]
function textoParaFloat(texto)
{
// Retira pontos que separam milhar se existirem. Ex: 1.000,25 vira 1000,25
texto = texto.replace("." , "");
// Substitui vírgula separando a casa decimal por ponto ex: 1000,25 vira 1000.25
texto = texto.replace("," , "."); // isso é necessário para converter para float corretamente
// Converte de texto para número real
numero = parseFloat(texto);
return numero; // Retorna um número float para ser usado para fazer cálculos
}
// Converte [valor float com ponto para casa decimal] para [texto com vírgula para separar centavos]
function floatParaTexto(numero)
{
numero = numero.toFixed(2); // Duas casas decimais
texto = numero.toString();
texto = texto.replace("." , ","); // substitui a vírgula por ponto
return texto;
}
// Apenas prevenção para pessoas que digitam ponto de milhar por costume
function removePonto(x)
{
x.value = x.value.replace('.', '');
}
div {text-align:center;}
table { border-collapse: collapse; border:1px solid #777; width:800px; margin:auto; }
.prodtd { width:700px; height:80px; }
.nomeprod { background-color:#ffa;}
.preco { background-color:#eee;}
<table>
<!-- Bloco gerado por PHP -->
<tr>
<td class="prodtd">
<div id="nome1" class="nomeprod">Nome Prod 1</div>
<div id="preco1" class="preco">10,00</div>
</td>
<td align="center" valign="middle">
<input type="button" value="-" onclick="remove(1)">
<span id="qtd1">0</span>
<input type="button" value="+" onclick="adiciona(1)">
</td>
</tr>
<!-- Fim Bloco gerado por PHP -->
<!-- Bloco gerado por PHP -->
<tr>
<td class="prodtd">
<div id="nome2" class="nomeprod">Nome Prod 2</div>
<div id="preco2" class="preco">22,50</div>
</td>
<td align="center" valign="middle">
<input type="button" value="-" onclick="remove(2)">
<span id="qtd2">0</span>
<input type="button" value="+" onclick="adiciona(2)">
</td>
</tr>
<!-- Fim Bloco gerado por PHP -->
<tr>
<td align="center"><b>Total: <span id="total">0,00<span></b></td>
<td> </td>
</tr>
</table>