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

我尝试将用户输入的两个数字相加，然后返回用户输入的两个值的和、差、积或商。为此，我做了两个输入，中间有一个下拉列表。下拉列表中有加、减、乘和除的选项。我要做的是执行用户试图执行的操作。你可以看到一个演示

//变量
让firstNum=document.getElementById（“num1”）；
设secondNum=document.getElementById（“num2”）；
让result=document.getElementById（“结果”）；
//事件侦听器
addEventListener（“输入”，main函数（））；
addEventListener（“输入”，main函数（））；
addEventListener（“输入”，main函数（））；
//主JavaScript
函数mainformation（）{
if（document.getElementById（“options”）.options[0]）{
var one=parseFloat（firstNum.value）| 0；
var two=parseFloat（secondNum.value）| 0；
result.innerHTML=1+2；
}
}

*{
字体系列：helvetica；
文本对齐：居中；
}

计算器
+
−
✖
÷

我已经更改了您的代码，新版本在这里

错误是您应该将函数调用封装到匿名函数中

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

---

除了一个小问题外，一切似乎都很好：

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

应该是：

firstNum.addEventListener("input", mainFunction);

因为函数已经定义，这需要一个函数，所以您只需要传递对函数的引用

代码： 我为所有四个操作符添加了功能，并将代码缩短了一点

//变量
让firstNum=document.getElementById（“num1”），
secondNum=document.getElementById（“num2”），
结果=document.getElementById（“结果”）；
//事件侦听器
firstNum.addEventListener（“输入”，main函数）；
secondNum.addEventListener（“输入”，main函数）；
结果。addEventListener（“输入”，主功能）；
//主JavaScript
函数mainformation（）{
var one=+firstNum.value | | 0；//转换为数字
var two=+secondNum.value | | 0；//转换为数字
var opt=document.getElementById（“选项”）；
//这比您正在使用的短
result.innerHTML=opt.options[0]？1+2:opt.options[1]？1-2:opt.options[2]？1*2:1/2；
}

*{
字体系列：helvetica；
文本对齐：居中；
}

计算器
+
−
✖
÷

还有一种非标准的方法来评估运算符，无需执行

开关

或

如果

，这是使用函数构造函数并在中间执行

result.innerHTML=（新函数（“return”+one+operator+two））（）

如果您发现任何错误，请通知我
-如果您有任何问题或错误，请告诉我们。您的问题是什么？您将在单击按钮或其他事件时调用javascript函数以获得结果的计算它是否能像您预期的那样工作？如果是，则不需要此职位。如果没有，请告诉我们哪里不对劲。我将投票结束这个问题，因为我们不是A/B测试人员。为什么不触发事件，单击按钮或输入更改/@Luca:oops。我的问题是，你可以使用
eval
获得同样的效果是的，完全一样
//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))();
}