Subtraction with decimal places in the result

Question

1. I have a problem that I can not solve, Function calculate() subtracts the price by the total paid and shows in the amount, only when showing in quantiafalta, it shows so:

Price: 62.000 Total Paid: 60.000 Outstanding amount: 2

And I wanted him to show it like this:

Price: 62.000 Total Paid: 60.000 Missing Amount: 2,000

<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>

Answer 1

The correct is to check the amounts of decimals for a proper return. This check is done on the line var quantDecimais

With the 62.00 input Preço and 60.00 in input TotalPago the result will be presented 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>

Answer 2

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 its value will return a value with 3 decimal places.

Answer 3

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);
    }
}