HTMLユーザーの入力値を1つの値にまとめて入力に応じて更新する

Question

私はhtmlで最善ではないし、インターネット上を見回してこれを行う方法を見つけることができなかったので、私は望んでいた誰かが私を正しい方向に向けることができます。

これは私が今持っているコードです：私はそこに入力がしていたものに応じて毎月の予算を作成することができるように食品、自動車、および手形のユーザー入力を追加しようとしています

 <p> 
      <label for="food">Food</label> 
      <input type="number" onkeypress="return isNumberKey(event)" id="food" /> 
     </p> 

     <p> 
      <label for="auto">Auto</label> 
      <input type="number" onkeypress="return isNumberKey(event)" id="auto" /> 
     </p> 

     <p> 
      <label for="bills">Bills</label> 
      <input type="number" onkeypress="return isNumberKey(event)" id="bills" /> 
     </p> 

     <p> 
      <label for="monthlybudget">Monthly Budget</label> 
      /* Add food + auto + bills whenever there is input */ 
     </p> 

入力フィールド。ユーザーが値を入力するたびに、毎月の予算フィールドが更新されますが、その方法を把握することはできません。例えば

： 食べ物：200 オート：150 法案：400

月の予算$、750

Answer 1

をあなたはjQueryのなしでそれを行うことができる方法である。

あなたのHTML内

// When document elements have loaded: 
 
document.addEventListener('DOMContentLoaded', function() { 
 
    // Get reference to all inputs and output: 
 
    var foodInput = document.getElementById('food'); 
 
    var autoInput = document.getElementById('auto'); 
 
    var billsInput = document.getElementById('bills'); 
 
    var budgetOutput = document.getElementById('monthlybudget'); 
 
    
 
    function calculateOutput() { 
 
     // Convert input values to numbers (+) and put sum in output: 
 
     budgetOutput.textContent = +foodInput.value + +autoInput.value + +billsInput.value; 
 
    } 
 
    
 
    // Calculate on any change in inputs: 
 
    foodInput.oninput = calculateOutput; 
 
    autoInput.oninput = calculateOutput; 
 
    billsInput.oninput = calculateOutput; 
 
    // Calculate at load: 
 
    calculateOutput(); 
 
});

<p> 
 
    <label for="food">Food</label> 
 
    <input type="number" id="food" /> 
 
</p> 
 

 
<p> 
 
    <label for="auto">Auto</label> 
 
    <input type="number" id="auto" /> 
 
</p> 
 

 
<p> 
 
    <label for="bills">Bills</label> 
 
    <input type="number" id="bills" /> 
 
</p> 
 

 
<p> 
 
    <div>Monthly Budget: <span id="monthlybudget"></span></div> 
 
</p>

Answer 2

ここで私は、その使用のjavascriptのコードを添付していました。

Answer 3

はこの試してみてください - ここでは

var food=$('#food'); 
var auto=$('#auto'); 
var bills=$('#bills'); 
$('#food,#auto,#bills').change(function(){ 
var total= getVal(food) +getVal(auto)+ getVal(bills); 
$('#lblTotal').text(total) 
}); 

function getVal(obj){ 
    return parseInt(obj.val()) || 0; 
} 

Demo

Answer 4

：

JavaScriptのファイルの追加

<p> 
     <label for="food">Food</label> 
     <input type="number" onkeypress="return isNumberKey(event)" id="food" class="sourceinput" /> 
    </p> 

    <p> 
     <label for="auto">Auto</label> 
     <input type="number" onkeypress="return isNumberKey(event)" id="auto" class="sourceinput" /> 
    </p> 

    <p> 
     <label for="bills">Bills</label> 
     <input type="number" onkeypress="return isNumberKey(event)" id="bills" class="sourceinput" /> 
    </p> 

<p> 
    <label for="monthlybudget">Monthly Budget</label> 
    <p id="monthlybudget"></p> 
</p> 

：私はjqueryの使用しています

$('.sourceinput').change(function() { 
    $('#monthlybudget").text($('#food).val() + $('#auto).val() + $('#bills').val()); 
}); 

...

Answer 5

入力が

チェック値このFidddle https://jsfiddle.net/o44bke0a/