如何在另一個框中顯示兩個文本框的總值 - 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