在 HTML/JavaScript 中减去两个数字

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

事件）。

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

Answer 2

我正在尝试制作一个像自动提款机一样的页面，可以提款存款，当用户尝试在提款或存款中输入数字后，如何更改余额