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

试试这个： -

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 2

如果没有jQuery，你可以这样做：

＆＃13;

// 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();
});

＆＃13;

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

＆＃13;

Answer 3

在你的HTML中：

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

在你的javascript文件中添加：

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

我正在使用jquery ......

Answer 4

使用H e l解析输入值

检查此Fidddle https://jsfiddle.net/o44bke0a/

Answer 5

我在这里使用javascript附加了代码。

HTML将用户输入值一起添加到一个值中，该值根据输入进行更新

5 个答案: