javascript - 计算值的变化

Question

在我的 html 文件中，我有 2 个选择框和 4 个输入文本框。

从第一个选择中，您可以选择要使用的数字(文本框)数量。 从第二个选择中，您可以选择数学运算 (+,-,*,/) 根据用户在第一次选择时的选择，会出现一些输入框。 现在您向这些输入添加数字，并根据您选择的内容和输入中的内容，结果应显示在特定的 div 中。

然后，当我更改任何内容时，结果应该会更新。

这是我目前所拥有的:

首先选择:

 <select id="quantity" name="qua" onchange="selectQuantity(this.value)">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
        </select>      

首先选择js:

 function selectQuantity(selectedValue){
    var e = document.getElementById("quantity");
    var quantity = e.options[e.selectedIndex].value;

 if ( quantity==='1') {
    $('#nt').fadeIn();
} else if ( quantity==='2') {
    $('#nt').fadeIn();
    $('#nt1').fadeIn();
} else if (  quantity==='3') {
    $('#nt').fadeIn();
    $('#nt1').fadeIn();
    $('#nt2').fadeIn();
} else { 
   $('#nt').fadeIn();
   $('#nt1').fadeIn();
   $('#nt2').fadeIn();
   $('#nt3').fadeIn()
 }
 }

第二次选择html:

 <select id="operation" name="ope" onchange="selectOperation(this.value)">
                <option value="+">+</option>
                <option value="-">-</option>
                <option value="*">*</option>
                <option value="/">/</option>
        </select>   

第二次选择js:

 function selectOperation(selectedValue){
    var e = document.getElementById("operation");
    var operation = e.options[e.selectedIndex].value;
 } 

输入文本示例:

 <input type="text" id="nt"  onchange="checkField(this.value)">

js:

 function checkField(val)
 {

 }

结果div:

 <div id="result"></div>

那么，我应该在哪里以及如何进行计算才能获得动态更新的结果？一个单独的功能？ 我所有的 js 函数都在单独的 js 文件中。 谢谢。

-FIDDLE example

Answer 1

这里有一个建议:

function calculator() {
    var val1 = parseInt($('#quantity').val());
    var op = $('#operation').val();

    for (var i = 0; i < val1; i++) {
        var incr = i ? i : '';
        $('#nt' + incr).fadeIn();
    }
    var sum = 0;
    function values2() {
        var internalSum = 0;
        $('[id^="nt"').each(function () {
            internalSum += parseInt(this.value == '' ? 0 : this.value);
        });
        return internalSum;
    }

    switch (op) {
        case '+':
            sum = val1 + values2();
            break;
        case '-':
            sum = val1 - values2();
            break;
        case '*':
            sum = val1 * values2();
            break;
        case '/':
            sum = val1 / values2();
            break;
        default:
            console.log('Missing parameters');
    }
    $('#result').html(sum);
}
$('select, input').on('change', calculator);

Demo