在 JavaScript 中对两个输入执行算术运算

Question

I am trying to add two numbers that a user enters, and returning the sum, difference, product or the quotient of two values the user enters. For that, I made two inputs with a drop-down list between that. The drop down list has options to add, subtract, multiply and divide. What I am trying to do is perform the operation the user attempts to perform. You can see a demo here .

 //Variables let firstNum = document.getElementById("num1"); let secondNum = document.getElementById("num2"); let result = document.getElementById("result"); //Event Listeners firstNum.addEventListener("input", mainFunction()); secondNum.addEventListener("input", mainFunction()); result.addEventListener("input", mainFunction()); //Main JavaScript function mainFunction() { if (document.getElementById("options").options[0]) { var one = parseFloat(firstNum.value) || 0; var two = parseFloat(secondNum.value) || 0; result.innerHTML = one+two; } }

 * { font-family: helvetica; text-align: center; }

 <h1>Calculator</h1> <form> <input type="number" id="num1" placeholder="First Number"/> <select id="options"> <option id="addition">&#43;</option> <option id="subtraction">&#8722;</option> <option id="multiplication">&#10006;</option> <option id="division">&#247;</option> </select> <input type="number" id="num2" placeholder="Second Number"/> <p id="result"></p> </form>

Please inform me if you find any errors. Thanks.

Answer 1

I have changed your code, the new version is here http://jsfiddle.net/v56fkaww/6/

The error was that you should encapsulate the call of function into an anonymous function

//Event Listeners
firstNum.addEventListener("input",function(){mainFunction()});
secondNum.addEventListener("input",function(){mainFunction()});

Answer 2

Everything seems to be fine except for a small problem :

firstNum.addEventListener("input", mainFunction());

should be :

firstNum.addEventListener("input", mainFunction);

Since the function is already defined and this expects a function so you only need to pass a reference to the function.

Code :

I added functionality for all four operators and shortened the code a bit

 //Variables let firstNum = document.getElementById("num1"), secondNum = document.getElementById("num2"), result = document.getElementById("result"); //Event Listeners firstNum.addEventListener("input", mainFunction); secondNum.addEventListener("input", mainFunction); result.addEventListener("input", mainFunction); //Main JavaScript function mainFunction() { var one = +firstNum.value||0; // convert to number var two = +secondNum.value||0; // convert to number var opt = document.getElementById("options"); // this is the shorter than what you are using result.innerHTML = opt.options[0] ? one + two : opt.options[1] ? one - two : opt.options[2] ? one * two : one / two; }

 * { font-family: helvetica; text-align: center; }

 <h1>Calculator</h1> <form> <input type="number" id="num1" placeholder="First Number"/> <select id="options"> <option id="addition">&#43;</option> <option id="subtraction">&#8722;</option> <option id="multiplication">&#10006;</option> <option id="division">&#247;</option> </select> <input type="number" id="num2" placeholder="Second Number"/> <p id="result"></p> </form>

Answer 3

There is also a non standard way to evaluate operator without the need of performing a switch or if , this is using a Function constructor and execute inmediate. result.innerHTML = (new Function("return "+one+operator+two))();

//Variables
let firstNum = document.getElementById("num1");
let secondNum = document.getElementById("num2");
let result = document.getElementById("result");
let operator = document.getElementById("options").value;

//Event Listeners
//You should asign the function itself not the result like mainFunction()
firstNum.addEventListener("input", mainFunction); 
secondNum.addEventListener("input", mainFunction);
result.addEventListener("input", mainFunction);
//All of this is like something.addEventListener("input", function(){//code});

function mainFunction() {
    var one = parseFloat(firstNum.value) || 0;
    var two = parseFloat(secondNum.value) || 0;
   //evaluate the operator as a javascipt operator not just as string 
    result.innerHTML = (new Function("return "+one+operator+two))();
}

Answer 4

            <td><input type="number" class="form-control text-center tot" id="input1"></td>
            <td id="mark" class="text-center"></td>
            <td><input type="number" class="form-control text-center tot" id="input2"></td>
            <td id="total" class="text-center"></td>

function inputOper(operaterName) {
let input1 = Number($('#input1').val());
let input2 = Number($('#input2').val());
let result = $('#total');

if(operaterName == 'add'){
    result = input1 + input2;
    $('#mark').html('+');
}else if(operaterName == 'sub'){
    result = input1 - input2;
    $('#mark').html('-');
}else if(operaterName == 'mul'){
    result = input1 * input2;
    $('#mark').html('*');
}else if(operaterName == 'div'){
    result = (input1 / input2).toFixed(2);
    $('#mark').html('/');
}
$('#total').html(result)

}