如何在另一个框中显示两个文本框的总值 - Javascript

Question

我是 javascript 的新手，我想在文本框中获得两项费用，并在另一个文本框中显示这两项费用的总和（已禁用，因此无法编辑，仅用于显示目的）下面是我的 html 表格。结果应该在输入fee1或fee2时显示，而不是在提交按钮中。 怎么做？

<div class="row">
                                                
<div class="col-xl-4">

    <div class="form-group">
        <label class="gr"><b>Consulation Fees:</b><span class="text-danger">*</span></label><input type="number" class="form-control" id="fee1" name="fee1"  required min="0">
    </div>
</div>
<div class="col-xl-4">
    <div class="form-group">
        <label class="gr"><b>Other Charges:</b></label><input type="number" class="form-control" id="fee2" name="fee2" min="0">
    </div>
</div>

<div class="col-xl-4">
    <div class="form-group">
        <label class="gr"><b>Total Fee:</b></label><input type="number" disabled  class="form-control" id ="total_fee" name="total_fee" >
    </div>
</div>

Answer 1

在fee1 和fee2 上使用输入事件，然后将它们的值相加并作为total_fee 的值。 例如

const fee1 = document.getElementById("fee1");

const fee2 = document.getElementById("fee2");

const total_fee = document.getElementById("total_fee");

document.getElementById("fee1").addEventListener("input", sum);

document.getElementById("fee2").addEventListener("input", sum); 
  
function sum() {
  total_fee.value =  Number(fee1.value)+Number(fee2.value);
}

看实际操作https://jsbin.com/lizunojadi/edit?html,js,output

Answer 2

基本上，您在两个控件上都听input事件，将值相加到另一个输入中。

 document.querySelectorAll("#fee1, #fee2").forEach(function(elem) { elem.addEventListener("input", do_sum) }) function do_sum() { var total = 0 document.querySelectorAll("#fee1, #fee2").forEach(function(elem) { total += +elem.value; }) document.querySelector("#total_fee").value = total }

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"> <div class="container"> <div class="row"> <div class="col-sm-4"> <div class="form-group"> <label class="gr"><b>Consulation Fees:</b><span class="text-danger">*</span></label><input type="number" class="form-control" id="fee1" name="fee1" required min="0"> </div> </div> <div class="col-sm-4"> <div class="form-group"> <label class="gr"><b>Other Charges:</b></label><input type="number" class="form-control" id="fee2" name="fee2" min="0"> </div> </div> <div class="col-sm-4"> <div class="form-group"> <label class="gr"><b>Total Fee:</b></label><input type="number" disabled class="form-control" id="total_fee" name="total_fee"> </div> </div> </div> </div>

Answer 3

这是您的代码的简单解决方案，

<div class="row">
                                                
<div class="col-xl-4">

    <div class="form-group">
        <label class="gr"><b>Consulation Fees:</b><span class="text-danger">*</span></label><input type="number" class="form-control" id="fee1" name="fee1"  required min="0" value="0">
    </div>
</div>
<div class="col-xl-4">
    <div class="form-group">
        <label class="gr"><b>Other Charges:</b></label><input type="number" class="form-control" id="fee2" name="fee2" min="0" value="0">
    </div>
</div>

<div class="col-xl-4">
    <div class="form-group">
        <label class="gr"><b>Total Fee:</b></label><input type="number" disabled  class="form-control" id ="total_fee" name="total_fee" >
    </div>
</div>

这里在 HTML 代码默认value="0" ，现在在 Javascript 中，

const fee1 = document.getElementById('fee1');
const fee2 = document.getElementById('fee2');
const totalFee = document.getElementById('total_fee');

function doSum() {
  const fee1Value = parseInt(fee1.value);
  const fee2Value = parseInt(fee2.value);
  const totalFeeValue = fee1Value + fee2Value;
  totalFee.value = totalFeeValue;
}

fee1.addEventListener('input', doSum);
fee2.addEventListener('input', doSum);

doSum() function 正在执行oninput