Online Calculator Applying Fine and Discount

Asked

Viewed 119 times

2

In my code below it adds a sum between fields per line. What I don’t know how to do, is when clicking on a checkbox he carries out the discount in percentage and in the other checkbox sum a fine in percentage. the bottom follows the image as it is today As I do not understand much of javascript I ask for a help on how to make it work

inserir a descrição da imagem aqui

<script>
window.onload=function(){
function getClosest(el, tagName) {
while (el = el.parentNode) {
    if (el.tagName.toLowerCase() == tagName) return el;
}
}

//como nao estamos usando jquery, devemos realizar o loop para cada item    selecionado

var classGas = document.getElementsByClassName("gas");
for(var i=0;i<classGas.length;i++){
classGas[i].addEventListener("keyup", function(e){
    updateValue(e);
});
}

var classIptu = document.getElementsByClassName("iptu");
for(var i=0;i<classIptu.length;i++){
classIptu[i].addEventListener("keyup", function(e){
    updateValue(e);
});
}


var classValor = document.getElementsByClassName("valor");
for(var i=0;i<classValor.length;i++){
classValor[i].addEventListener("keyup", function(e){
    updateValue(e);
});
}

var classRateio = document.getElementsByClassName("rateio");
for(var i=0;i<classRateio.length;i++){
classRateio[i].addEventListener("keyup", function(e){
    updateValue(e);
});
}

var classCb = document.getElementsByClassName("cb");
for(var i=0;i<classCb.length;i++){
classCb[i].addEventListener("keyup", function(e){
    updateValue(e);
});
}

var classMulta = document.getElementsByClassName("multa");
for(var i=0;i<classMulta.length;i++){
classMulta[i].addEventListener("keyup", function(e){
    updateValue(e);
});
}

var classDesconto = document.getElementsByClassName("desconto");
for(var i=0;i<classDesconto.length;i++){
classDesconto[i].addEventListener("keyup", function(e){
    updateValue(e);
});
}

//funcao para atualizar os valores
function updateValue(e){
var total = 0;
var gas = 0;
var valor = 0;
var rateio = 0;
var iptu = 0;
var multa = 0;
var desconto = 0;

// ir buscar o outro valor dentro da mesma linha
var tr = getClosest(e.target, 'tr');
valor = tr.querySelector('input[name="valor[]"]').value;
gas = tr.querySelector('input[name="gas[]"]').value;
rateio = tr.querySelector('input[name="rateio[]"]').value;
cb = tr.querySelector('input[name="cb[]"]').value;
iptu = tr.querySelector('input[name="iptu[]"]').value; 
multa = tr.querySelector('input[name="multa[]"]').value; 
desconto = tr.querySelector('input[name="desconto[]"]').value; 

total = parseFloat(gas) + parseFloat(valor)+ parseFloat(rateio)+   parseFloat(cb)+ parseFloat(iptu)+ parseFloat(multa)+ parseFloat(desconto) ;

function arredondar(total) {
if (total.indexOf(',') != -1) total = total.replace(',', '.');
total = parseFloat(total) * 100;
return Math.floor(total) / 100;
}



tr.querySelector('input[name="total[]"]').value = total;

}

}//]]> 
</script>
<table>
<?php


        $valor1   = '1000,00';
        $iptuf    = '250,00';
        $rateiof  = '300,00';
        $gas      = '50,00';
        $cb       = '50,00';
        $multa    = '2';  //% porcento
        $desconto = '10'; // porcento
        $totalf = '1650,00';

 $i = 1;
 while ($i <= 10) {
 $id_finan = $i++;
 ?>
        <tr>
        <td>
        <input type="text" class="valor" name="valor[]" class="valor" id="<? echo $id_finan?>valor"  value=" <?echo $valor1?>" /></td>
        <td><input type="text" name="iptu[]"         class="iptu"   size="8"   style="height: 20px;"  style="width: 20px; margin: 0 auto;" value="<?echo  $iptuf?>"    id="<?echo $id_finan?>iptu"      /></td>
        <td><input type="text" name="rateio[]"  class="rateio" size="8"   style="height: 20px;"  style="width: 20px; margin: 0 auto;" value="<?echo  $rateiof?>"  id="<?echo $id_finan?>rateiof"   /></td>
        <td><input type="text" name="gas[]"     class="gas"    size="8"  style="height: 20px;"  style="width: 20px; margin: 0 auto;" value="<?echo $gas?>"                 id="<?echo $id_finan?>gas"   /></td>
        <td><input type="text" name="cb[]"      class="cb"     size="8"  style="height: 20px;"  style="width: 20px; margin: 0 auto;" value="<?echo $cb?>"                 id="<?echo $id_finan?>cb"   /></td>
        <td>Multa<input type="checkbox" name="multa[]"    class="multa"    value="<?echo $multa?>"      id="<?echo $id_finan?>multa" />
            Desconto<input type="checkbox" name="desconto[]" class="desconto" value="<?echo $desconto?>"   id="<?echo $id_finan?>desconto" />
        </td>
        <td class="text-center"><input type="text" class="total" size="10" name="total[]" value="<?echo $totalf?>"  /></td>

        </tr>

   <?}?>
   </table>
php javascript

1 answer

3


Edited

Let’s go. Well, I checked your code and I understood better how it works.

Here is the result.

<script>
window.onload=function(){
function getClosest(el, tagName) {
while (el = el.parentNode) {
if (el.tagName.toLowerCase() == tagName) return el;
}
}

//como nao estamos usando jquery, devemos realizar o loop para cada item    selecionado

var classGas = document.getElementsByClassName("gas");
for(var i=0;i<classGas.length;i++){
classGas[i].addEventListener("keyup", function(e){
updateValue(e);
});
}

var classIptu = document.getElementsByClassName("iptu");
for(var i=0;i<classIptu.length;i++){
classIptu[i].addEventListener("keyup", function(e){
updateValue(e);
});
}


var classValor = document.getElementsByClassName("valor");
for(var i=0;i<classValor.length;i++){
classValor[i].addEventListener("keyup", function(e){
updateValue(e);
});
}

var classRateio = document.getElementsByClassName("rateio");
for(var i=0;i<classRateio.length;i++){
classRateio[i].addEventListener("keyup", function(e){
updateValue(e);
});
}

var classCb = document.getElementsByClassName("cb");
for(var i=0;i<classCb.length;i++){
classCb[i].addEventListener("keyup", function(e){
updateValue(e);
});
}

var classMulta = document.getElementsByClassName("multa");
for(var i=0;i<classMulta.length;i++){
classMulta[i].addEventListener("change", function(e){
updateValue(e);
});
}

var classDesconto = document.getElementsByClassName("desconto");
for(var i=0;i<classDesconto.length;i++){
classDesconto[i].addEventListener("change", function(e){
updateValue(e);
});
}

//funcao para atualizar os valores
function updateValue(e){
var total = 0.0;
var gas = 0;
var valor = 0;
var rateio = 0;
var iptu = 0;
var multa = 0;
var desconto = 0;

// ir buscar o outro valor dentro da mesma linha
var tr = getClosest(e.target, 'tr');
valor = tr.querySelector('input[name="valor[]"]').value.replace(",", ".");
gas = tr.querySelector('input[name="gas[]"]').value.replace(",", ".");
rateio = tr.querySelector('input[name="rateio[]"]').value.replace(",", ".");
cb = tr.querySelector('input[name="cb[]"]').value.replace(",", ".");
iptu = tr.querySelector('input[name="iptu[]"]').value.replace(",", "."); 
multa = tr.querySelector('input[name="multa[]"]').value.replace(",", "."); 
desconto = tr.querySelector('input[name="desconto[]"]').value.replace(",", "."); 


total = (parseFloat(gas) + parseFloat(valor)+ parseFloat(rateio)+   parseFloat(cb)+ parseFloat(iptu)).toFixed(2);

function arredondar(total) {
if (total.indexOf(',') != -1) total = total.replace(',', '.');
total = parseFloat(total) * 100;
return Math.floor(total) / 100;
}

var aplicarMulta    = tr.querySelector('input[name="multa[]"]').checked,
aplicarDesconto = tr.querySelector('input[name="desconto[]"]').checked,
multa    = tr.querySelector('input[name="multa[]"]').value,
desconto = tr.querySelector('input[name="desconto[]"]').value;

if (aplicarMulta == true) {
var multa = (total * multa) / 100;
total = (parseFloat(total) + parseFloat(multa)).toFixed(2);
}

if (aplicarDesconto == true) {
var desconto = (total * desconto) / 100;
total = (parseFloat(total) - parseFloat(desconto)).toFixed(2);
}


tr.querySelector('input[name="total[]"]').value = total.replace(".", ",");

}

}//]]> 
</script>
<table>
<?php


    $valor1   = '1000,00';
    $iptuf    = '250,00';
    $rateiof  = '300,00';
    $gas      = '50,00';
    $cb       = '50,00';
    $multa    = '2';  //% porcento
    $desconto = '10'; // porcento
    $totalf = '1650,00';

 $i = 1;
 while ($i <= 10) {
 $id_finan = $i++;
 ?>
    <tr>
    <td>
    <input type="text" class="valor" name="valor[]" class="valor" id="<?php  echo $id_finan?>valor"  value=" <?php echo $valor1?>" /></td>
    <td><input type="text" name="iptu[]"         class="iptu"   size="8"   style="height: 20px;"  style="width: 20px; margin: 0 auto;" value="<?php echo  $iptuf?>"    id="<?php echo $id_finan?>iptu"      /></td>
    <td><input type="text" name="rateio[]"  class="rateio" size="8"   style="height: 20px;"  style="width: 20px; margin: 0 auto;" value="<?php echo  $rateiof?>"  id="<?php echo $id_finan?>rateiof"   /></td>
    <td><input type="text" name="gas[]"     class="gas"    size="8"  style="height: 20px;"  style="width: 20px; margin: 0 auto;" value="<?php echo $gas?>"                 id="<?php echo $id_finan?>gas"   /></td>
    <td><input type="text" name="cb[]"      class="cb"     size="8"  style="height: 20px;"  style="width: 20px; margin: 0 auto;" value="<?php echo $cb?>"                 id="<?php echo $id_finan?>cb"   /></td>
    <td>Multa<input type="checkbox" name="multa[]"    class="multa"    value="<?php echo $multa?>"      id="<?php echo $id_finan?>multa" />
        Desconto<input type="checkbox" name="desconto[]" class="desconto" value="<?php echo $desconto?>"   id="<?php echo $id_finan?>desconto" />
    </td>
    <td class="text-center"><input type="text" class="total" size="10" name="total[]" value="<?php echo $totalf?>"  /></td>

    </tr>

<?php }?>
</table>

Explanation

I kept its structure. But I changed the events of its var classMulta and var classDesconto to change.

I also created two check variables "applicationMulta" and "applicationDesconto". where I check whether checkbox inputs are checked.

The rest is just calculating. By reviewing the code you will understand all the modifications smoothly! ;)

  • Alan Thanks for the help, more now in this script no longer works the calculations of other fields

  • I reviewed your code and made some changes. Take a look at how it looked. ;)

  • Perfect now ..

Browser other questions tagged php javascript

You are not signed in. Login or sign up in order to post.