在 JavaScript 中對兩個輸入執行算術運算

Question

我試圖將用戶輸入的兩個數字相加，並返回用戶輸入的兩個值的總和、差、乘積或商。 為此，我做了兩個輸入，中間有一個下拉列表。 下拉列表有加、減、乘和除的選項。 我想做的是執行用戶嘗試執行的操作。 您可以在此處查看演示。

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

如果您發現任何錯誤，請通知我。 謝謝。

Answer 1

我已經更改了您的代碼，新版本在這里http://jsfiddle.net/v56fkaww/6/

錯誤是你應該把函數的調用封裝成一個匿名函數

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

Answer 2

除了一個小問題外，一切似乎都很好：

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

應該 ：

firstNum.addEventListener("input", mainFunction);

由於該函數已經定義並且這需要一個函數，因此您只需要傳遞對該函數的引用。

代碼 ：

我為所有四個運算符添加了功能並稍微縮短了代碼

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

還有一種非標准的方法來評估運算符而無需執行switch或if ，這是使用函數構造函數並立即執行。 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)

}