如何更改输入文本值已在javascript中设置

Question

i want asking about javascript. i develop a tax calculation system.

function countsisa(){
    var iv = document.getElementById("invoicevalue");
    var ppn = document.getElementById("ppn");
    var pph = document.getElementById("pph");
    var dpp = document.getElementById("dpp");
    var propv = document.getElementById("propertyvalue");
    var shipv = document.getElementById("shippingvalue");
    var dppship = document.getElementById("dppshipping");
    var pph23 = document.getElementById("pph23");
    var total = document.getElementById("total");
    var income = document.getElementById("income");
    var ppndoc = document.getElementById("ppndoc");
    var pphdoc = document.getElementById("pphdoc");
    var pphdoc23 = document.getElementById("pphdoc23");

    if(iv.value.replace(/[.*+?^${}()|[\]\\]/g,"") > 0){
        document.getElementById("propertyvalue").disabled = true;
        document.getElementById("shippingvalue").disabled = true;
        document.getElementById("dppshipping").disabled = true;
        document.getElementById("pph23").disabled = true;

        dpp.value = Math.ceil(iv.value.replace(/[.*+?^${}()|[\]\\]/g,"") / 1.1);
        pph.value = Math.ceil(dpp.value.replace(/[.*+?^${}()|[\]\\]/g,"") * 0.015);
        ppn.value = Math.ceil(dpp.value.replace(/[.*+?^${}()|[\]\\]/g,"") * 0.10);
        income.value = iv.value.replace(/[.*+?^${}()|[\]\\]/g,"")-pph.value-ppn.value;
    }else{
        if(propv.value.replace(/[.*+?^${}()|[\]\\]/g,"") > 0){
            document.getElementById("invoicevalue").disabled = true;
            total = parseFloat(propv.value.replace(/[.*+?^${}()|[\]\\]/g,""),10)+parseFloat(shipv.value.replace(/[.*+?^${}()|[\]\\]/g,""),10);
            // total = String(total);
            propv.value = String(propv.value);
            shipv.value = String(shipv.value);
            dpp.value = Math.ceil(propv.value.replace(/[.*+?^${}()|[\]\\]/g,"") / 1.1);
            dppship.value = Math.ceil(shipv.value.replace(/[.*+?^${}()|[\]\\]/g,"") / 1.1);
            pph.value = Math.ceil(dpp.value.replace(/[.*+?^${}()|[\]\\]/g,"") * 0.015);
            pph23.value = Math.ceil(dppship.value.replace(/[.*+?^${}()|[\]\\]/g,"") * 0.02);
            ppn.value = (propv.value.replace(/[.*+?^${}()|[\]\\]/g,"") - dpp.value)+(shipv.value.replace(/[.*+?^${}()|[\]\\]/g,"")-dppship.value);
            income.value = total-pph.value-ppn.value-pph23.value;
        }else{
            document.getElementById("propertyvalue").disabled = false;
            document.getElementById("shippingvalue").disabled = false;
            document.getElementById("dppshipping").disabled = false;
            document.getElementById("pph23").disabled = false;
        }
    }
    console.log(total);

    if(dpp.value <= 0){
        dpp.value = 0;
    }
    if(dppship.value <= 0){
        dppship.value = 0;
    }
    if(pph.value <= 0){
        pph.value = 0;
    }

    if(pph23.value <= 0){
        pph23.value = 0;
    }
    if(ppn.value <= 0){
        ppn.value = 0;
    }

    if(income.value <= 0){
        income.value = 0;
    }

    dppship.value = tandaPemisahTitik(dppship.value);
    dpp.value = tandaPemisahTitik(dpp.value);
    pph.value = tandaPemisahTitik(pph.value);
    pph23.value = tandaPemisahTitik(pph23.value);
    ppn.value = tandaPemisahTitik(ppn.value);
    pphdoc.value = tandaPemisahTitik(pph.value.replace(/[.*+?^${}()|[\]\\]/g,""));
    pphdoc23.value = tandaPemisahTitik(pph23.value.replace(/[.*+?^${}()|[\]\\]/g,""));
    ppndoc.value = tandaPemisahTitik(ppn.value);
    income.value = tandaPemisahTitik(income.value);


}

this my javascript code to count value and display it in input value.

                                            <div class="form-group">
                                                <label class="control-label col-md-3 col-sm-3 col-xs-12" for="ppn"><?php print _('mi_invoice_ppn'); ?></label>
                                                <div class="col-md-6 col-sm-6 col-xs-12">
                                                    <div class="input-group">
                                                            <span class="input-group-addon" style="border-radius:0px;">Rp</span>
                                                            <input type="text" name="ppn" id="ppn" class="form-control" onkeydown="return numbersonly(this, event);" onkeyup="javascript:tandaPemisahTitik(this);" placeholder="0" />
                                                    </div>
                                                </div>
                                            </div>

this is the input code. i want change input text value has been count in javascript function. i want to manually changed again. so javascript function to count automatic. and can edit again if miscalculation.

Answer 1

If you want to recalculate when any input value's changed, you can add change listener on the input elements.

will be look like:

let inputElems = document.querySelectorAll("input");
for (let i = 0, len = inputElems.length; i < len; i++) {
  inputElems[i].addEventListener("change", countsisa);
}