代码：

Question

我正在尝试添加用户输入的两个数字，并返回用户输入的两个值的和，差，乘积或商。为此，我做了两个输入，其间有一个下拉列表。下拉列表包含加，减，乘和除的选项。我要做的是执行用户尝试执行的操作。您可以看到演示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>

如果您发现任何错误，请通知我。感谢。

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

由于函数已经定义，并且这需要一个函数，因此您只需要传递对该函数的引用。

代码：

我为所有四个运营商添加了功能并稍微缩短了代码

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

还有一种非标准方法来评估运算符而无需执行switch或if，这是使用Function构造函数并执行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))();
}

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

3 个答案:

代码：