Subtraction with decimals in result

Navigation
0
  • I have a problem that I can not solve, the function calculate () subtracts the price from the total payment and shows in the quantifalta, but when showing in the quantifalta, it shows like this:

    • Price: 62,000 Total Payment: 60,000 Amount Missing: 2

    And I wanted it to show like this:

    Price: 62,000 Total Payment: 60,000 Amount Missing: 2000 

    <script>
function calcular() {
    var num1 = Number(document.getElementById("Preco").value);
    var num2 = Number(document.getElementById("TotalPago").value);
    var elemResult = document.getElementById("QuantiaFalta")
    if (elemResult.textContent === undefined) {
       elemResult.textContent = String(num1 - num2);
    }
    else {
       elemResult.innerText = String(num1 - num2);
    }
}
</script>
<div class="form-group">
                    <label class="col-sm-3 control-label">Pre&ccedilo</label>
                    <div class="col-sm-5">
                        <input type="text" name="fPreco" id="Preco" class="w3-input w3-animate-input" style="width:135px; border-bottom: 2px solid black" onblur="calcular();" value="<?php echo $Preco; ?>" readonly="readonly">
                    </div>
                </div>
<div class="form-group">
                    <label class="col-sm-3 control-label">Total Pago *</label>
                    <div class="col-sm-5">
                        <input type="text" name="fTotalPago" id="TotalPago" class="w3-input w3-animate-input" style="width:350px; border-bottom: 2px solid orange" onblur="calcular();" value="<?php echo $Preco; ?>" required>
                    </div>
                </div>
<div class="form-group">
                    <label class="col-sm-3 control-label">Quantia em Falta *</label>
                    <div class="col-sm-5">
                        <span type="text" name="fQuantiaFalta" id="QuantiaFalta" class="w3-input" style="width:350px; border-bottom: 2px solid orange" required></span>
                    </div>
                </div>
        
    asked by anonymous 08.07.2017 / 14:14

    3 answers

    0

    The solution would be to add toFixed at the end of the result 

    function calcular() {
    var num1 = Number(document.getElementById("Preco").value);
    var num2 = Number(document.getElementById("TotalPago").value);
    var elemResult = document.getElementById("QuantiaFalta")
    var fixa = 3;
    if (elemResult.textContent === undefined) {
       elemResult.textContent = (num1 - num2).toFixed(fixa);
    }
    else {
       elemResult.innerText = (num1 - num2).toFixed(fixa);
    }
}
        
    08.07.2017 / 17:49
    1

    The correct thing is to check the decimal place quantities for an appropriate return. This check is done at line var quantDecimais

    With the entries of 62.00 in input Preço and 60.00 in input TotalPago the result will be displayed correctly, as well as 6200.00 and 6000.00 will also return a coherent result. 

    function calcular() {

    var num1 = (document.getElementById("Preco").value);
    
    var quantDecimais = (num1 + "").split(".")[1].length;
    
    console.log (quantDecimais);       
    
    var num2 = (document.getElementById("TotalPago").value);
    var elemResult = document.getElementById("QuantiaFalta")

    if (elemResult.textContent === undefined) {
       elemResult.textContent = (num1 - num2).toFixed(quantDecimais);
    }
    else {
       elemResult.innerText = (num1 - num2).toFixed(quantDecimais);
    }
}
    <div class="form-group">
                    <label class="col-sm-3 control-label">Pre&ccedilo</label>
                    <div class="col-sm-5">
                        <input type="text" name="fPreco" id="Preco" class="w3-input w3-animate-input" style="width:135px; border-bottom: 2px solid black" onblur="calcular();" value="">
                    </div>
                </div>
<div class="form-group">
                    <label class="col-sm-3 control-label">Total Pago *</label>
                    <div class="col-sm-5">
                        <input type="text" name="fTotalPago" id="TotalPago" class="w3-input w3-animate-input" style="width:350px; border-bottom: 2px solid orange" onblur="calcular();" value="" required>
                    </div>
                </div>
<div class="form-group">
                    <label class="col-sm-3 control-label">Quantia em Falta *</label>
                    <div class="col-sm-5">
                        <span type="text" name="fQuantiaFalta" id="QuantiaFalta" class="w3-input" style="width:350px; border-bottom: 2px solid orange"></span>
                    </div>
                </div>
        
    08.07.2017 / 22:41
    0

    You can use toFixed to determine how many decimal places the query will return. For example: 

    function calcular() {
    var num1 = 62.000;
    var num2 = 60.000;
    var elemResult = num1-num2;
    document.write(elemResult.toFixed(3));
}
calcular();

    In this case your value will return a value with 3 decimal places.

        
    08.07.2017 / 16:54
    mascara input html with javascript Doubts about JS function