Question

我试图从HTML输入表单中减去两个数字，并使用JavaScript将结果填充到另一个输入字段中。不幸的是我是JavaScript的新手，所以请非常友好地指出我正确的方向。这是我的HTML代码。

<div class="form-group col-lg-6">
    <label for="exampleInputText">Total Price</label>
    <input type="text" name="totalval"     class="form-control" id="totalval">
</div>

<div class="form-group col-lg-6">
    <label for="exampleInputText">Initial Deposit</label>
    <input type="text" name="inideposit" class="form-control" id="inideposit">
</div>

<div class="form-group col-lg-6">
    <label for="exampleInputText">Outstanding Dues</label>
    <input type="text" name="remainingval" class="form-control" id="remainingval" >
</div>

这是我的JavaScript代码：

<script type="text/javascript">

    var total = parseInt(document.getElementById("totalval").value);
    var val2 = parseInt(document.getElementById("inideposit").value);
    var ansD = document.getElementById("remainingval");
    ansD.value = total - val2;

</script>

Answer 1

您的代码工作正常，因此您只需将代码包装在函数中，然后每次修改输入字段时调用它（onchange event）。

<div class="form-group col-lg-6">
    <label for="exampleInputText">Total Price</label>
    <input type="text" name="totalval" class="form-control" id="totalval" onchange="updateDue()">
</div>
<div class="form-group col-lg-6">
    <label for="exampleInputText">Initial Deposit</label>
    <input type="text" name="inideposit" class="form-control" id="inideposit" onchange="updateDue()">
</div>
<div class="form-group col-lg-6">
    <label for="exampleInputText">Outstanding Dues</label>
    <input type="text" name="remainingval" class="form-control" id="remainingval">
</div>

最后，为了确保它们是数字（当其中一个为空时我得到一些奇怪的结果），添加一些代码以确保值是数字：

function updateDue() {

    var total = parseInt(document.getElementById("totalval").value);
    var val2 = parseInt(document.getElementById("inideposit").value);

    // to make sure that they are numbers
    if (!total) { total = 0; }
    if (!val2) { val2 = 0; }

    var ansD = document.getElementById("remainingval");
    ansD.value = total - val2;
}

你可以在这个JSFiddle上看到它：http://jsfiddle.net/sbu00cu2/

在HTML / JavaScript中减去两个数字

1 个答案: