javascript - calculate on change of values

Question

In my html file I have 2select boxes and 4 input text boxes.

From the first select you can choose how many numbers (textboxes) would you like to use. From the second select you can choose a mathematical operation (+,-,*,/) According to users choice in first select, number of input boxes will appear. Now you add numbers to these inputs and based on what you have selected and what you have in inputs, the result should appear in a particular div.

Then, when I change anything the result should be updated.

This is what I have so far:

First select:

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

first 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()
 }
 }

Second select html:

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

Second select js:

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

Input text example:

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

js:

 function checkField(val)
 {

 }

And the result div:

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

So, where and how should I put my calculations to achieve this dynamicly updated result? To a separate function? All of my js functions are in separate js file. Thank you.

-FIDDLE example

Answer 1

Here is a suggestion:

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