如何在JavaScript中执行计算并将其显示在输入框中？

我试图对两个数字做一个简单的计算，让用户将它们相乘或相除。我知道还有其他方法可以用更少的代码来实现这一点，但我想弄清楚为什么我的结果框会显示NaN。我已经测试过，以确保userInput1和userInput2变量确实都是数字，但看起来其他函数内部发生了一些事情，使其成为NaN`

/*eslint环境浏览器*/
var$=函数（id）{
“严格使用”；
返回窗口.document.getElementById（id）；
};
var userInput1=parseInt（$（'input1'），10）；
var userInput2=parseInt（$（'input2'），10）；
//检验
console.log（userInput1的类型）；
console.log（userInput2的类型）；
函数doTheMultiCalc（）{
“严格使用”；
var multiCalculation=userInput1*userInput2；
//检验
console.log（typeof（multiCalculation））；
$（'resultOutput'）。值=多重计算；
返回多重计算；
}
函数doTheDivCalc（）{
“严格使用”；
var divCalculation=userInput1/userInput2；
//检验
console.log（type of（div计算））；
$（'resultOutput'）。值=divCalculation；
收益率计算；
}
//事件处理函数
函数init（）{
“严格使用”；
$（'multiply'）。addEventListener（'click'，doTheMultiCalc）；
$（'divide'）。addEventListener（'click'，doTheDivCalc）；
}
addEventListener（'load'，init）
第一个号码

第二个号码

倍增
除法

结果是
我建议您设法解决这个问题。因此，我看到了两个问题

首先也是最重要的一点是，您实际上并没有得到输入的值。您需要使用
$（'input1'）.value
来检索输入的实际值

您还需要在执行每个操作之前获取该值。在这里，您可以看到它正在发挥作用：


/*eslint环境浏览器*/
var$=函数（id）{
“严格使用”；
返回窗口.document.getElementById（id）；
};
函数doTheMultiCalc（）{
“严格使用”；
var userInput1=parseInt（$（'input1'）。值，10）；
var userInput2=parseInt（$（'input2'）。值，10）；
var multiCalculation=userInput1*userInput2；
$（'resultOutput'）。值=多重计算；
返回多重计算；
}
函数doTheDivCalc（）{
“严格使用”；
var userInput1=parseInt（$（'input1'）。值，10）；
var userInput2=parseInt（$（'input2'）。值，10）；
var divCalculation=userInput1/userInput2；
$（'resultOutput'）。值=divCalculation；
收益率计算；
}
//事件处理函数
函数init（）{
“严格使用”；
$（'multiply'）。addEventListener（'click'，doTheMultiCalc）；
$（'divide'）。addEventListener（'click'，doTheDivCalc）；
}
addEventListener（'load'，init）
第一个号码


第二个号码


倍增
除法
结果是
我建议您设法解决这个问题。因此，我看到了两个问题

首先也是最重要的一点是，您实际上并没有得到输入的值。您需要使用
$（'input1'）.value
来检索输入的实际值

您还需要在执行每个操作之前获取该值。在这里，您可以看到它正在发挥作用：


/*eslint环境浏览器*/
var$=函数（id）{
“严格使用”；
返回窗口.document.getElementById（id）；
};
函数doTheMultiCalc（）{
“严格使用”；
var userInput1=parseInt（$（'input1'）。值，10）；
var userInput2=parseInt（$（'input2'）。值，10）；
var multiCalculation=userInput1*userInput2；
$（'resultOutput'）。值=多重计算；
返回多重计算；
}
函数doTheDivCalc（）{
“严格使用”；
var userInput1=parseInt（$（'input1'）。值，10）；
var userInput2=parseInt（$（'input2'）。值，10）；
var divCalculation=userInput1/userInput2；
$（'resultOutput'）。值=divCalculation；
收益率计算；
}
//事件处理函数
函数init（）{
“严格使用”；
$（'multiply'）。addEventListener（'click'，doTheMultiCalc）；
$（'divide'）。addEventListener（'click'，doTheDivCalc）；
}
addEventListener（'load'，init）
第一个号码


第二个号码


倍增
除法
结果是
这可能有效


var$=函数（id）{
“严格使用”；
返回文档.getElementById（id）；
};
函数doTheMultiCalc（）{
“严格使用”；
var multiCalculation=parseInt（$（'input1'）。值，10）*parseInt（$（'input2'）。值，10）；
//检验
$（'resultOutput'）。值=多重计算；
}
函数doTheDivCalc（）{
“严格使用”；
var divCalculation=parseInt（$（'input1'）.value，10）/parseInt（$（'input2'）.value，10）；
//检验
$（'resultOutput'）。值=divCalculation；
}
//事件处理函数
函数init（）{
“严格使用”；
$（'multiply'）。addEventListener（'click'，doTheMultiCalc）；
$（'divide'）。addEventListener（'click'，doTheDivCalc）；
}
addEventListener（'load'，init）
第一个号码


第二个号码


倍增
除法
结果是
这可能有效


var$=函数（id）{
“严格使用”；
返回文档.getElementById（id）；
};
函数doTheMultiCalc（）{
“严格使用”；
var multiCalculation=parseInt（$（'input1'）。值，10）*parseInt（$（'input2'）。值，10）；
//检验
$（'resultOutput'）。值=多重计算；
}
函数doTheDivCalc（）{
“严格使用”；
var divCalculation=parseInt（$（'input1'）.value，10）/parseInt（$（'input2'）.value，10）；
//检验
$（'resultOutput'）。值=divCalculation；
}
//事件处理函数
函数init（）{
“严格使用”；
$（'multiply'）。addEventListener（'click'，doTheMultiCalc）；
$（'divide'）。addEventListener（'click'，doTheDivCalc）；
}
addEventListener（'load'，init）
第一个号码


第二个号码


倍增
除法
结果是
我昨天为你的app.js找到了解决方案，但我失去了互联网，无法响应

Annother解决方案创建一个函数getInput（），以便在那里进行测试