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

Question

我正在尝试对两个数字进行简单的计算，以使用户可以将它们相乘或相除。 我知道还有其他方法可以用更少的代码来执行此操作，但我想弄清楚为什么我的结果框显示NaN。 我已经进行测试，以确保userInput1和userInput2变量的确是数字，但是看起来其他函数内部发生了某些事情，使其变为NaN。

 /*eslint-env browser*/ var $ = function(id) { "use strict"; return window.document.getElementById(id); }; var userInput1 = parseInt($('input1'), 10); var userInput2 = parseInt($('input2'), 10); //TO TEST console.log(typeof userInput1); console.log(typeof userInput2); function doTheMultiCalc() { "use strict"; var multiCalculation = userInput1 * userInput2; //TO TEST console.log(typeof(multiCalculation)); $('resultOutput').value = multiCalculation; return multiCalculation; } function doTheDivCalc() { "use strict"; var divCalculation = userInput1 / userInput2; //TO TEST console.log(typeof(divCalculation)); $('resultOutput').value = divCalculation; return divCalculation; } //Event Handler Function function init() { "use strict"; $('multiply').addEventListener('click', doTheMultiCalc); $('divide').addEventListener('click', doTheDivCalc); } window.addEventListener('load', init); 

 <label for="input1">1st Number</label><input id="input1"><br> <label for="input2">2nd Number</label><input id="input2"><br> <button id="multiply" type="button">Multiply</button> <button id="divide" type="button">divide</button><br> <label for="resultOutput">Result is</label> <input id="resultOutput"> 

`

Answer 1

我赞扬您试图弄清楚这一点。 因此，我看到了两个问题。

首先，您实际上并没有获得输入的价值。 您需要使用$('input1').value检索输入的实际值。

您还需要在执行每个操作之前获取该值。 在这里，您可以看到它的实际效果：

 /*eslint-env browser*/ var $ = function(id) { "use strict"; return window.document.getElementById(id); }; function doTheMultiCalc() { "use strict"; var userInput1 = parseInt($('input1').value, 10); var userInput2 = parseInt($('input2').value, 10); var multiCalculation = userInput1 * userInput2; $('resultOutput').value = multiCalculation; return multiCalculation; } function doTheDivCalc() { "use strict"; var userInput1 = parseInt($('input1').value, 10); var userInput2 = parseInt($('input2').value, 10); var divCalculation = userInput1 / userInput2; $('resultOutput').value = divCalculation; return divCalculation; } //Event Handler Function function init() { "use strict"; $('multiply').addEventListener('click', doTheMultiCalc); $('divide').addEventListener('click', doTheDivCalc); } window.addEventListener('load', init); 

 <label>1st Number</label><input id="input1"><br><br> <label>2nd Number</label><input id="input2"><br><br> <button id="multiply">Multiply</button> <button id="divide">divide</button><br><br> <label>Result is</label> <input id="resultOutput"> 

Answer 2

这可能有效。

 var $ = function (id) { "use strict"; return document.getElementById(id); }; function doTheMultiCalc() { "use strict"; var multiCalculation = parseInt($('input1').value, 10) * parseInt($('input2').value, 10); //TO TEST $('resultOutput').value = multiCalculation; } function doTheDivCalc() { "use strict"; var divCalculation = parseInt($('input1').value, 10) / parseInt($('input2').value, 10); //TO TEST $('resultOutput').value = divCalculation; } //Event Handler Function function init() { "use strict"; $('multiply').addEventListener('click', doTheMultiCalc); $('divide').addEventListener('click', doTheDivCalc); } window.addEventListener('load', init); 

  <label>1st Number</label><input id = "input1"><br><br> <label>2nd Number</label><input id = "input2"><br><br> <button id = "multiply">Multiply</button> <button id = "divide">divide</button><br><br> <label>Result is</label> <input id = "resultOutput"> 

Answer 3

昨天我找到了适用于您app.js的解决方案，但我失去了互联网，无法响应

另一个解决方案创建一个函数getInput（），以便您可以在其中测试该值是否为数字...不为空等...：

 var $ = function (id) { "use strict"; return window.document.getElementById(id); }; function getInput(){ userInput1 = parseInt($('input1').value, 10); userInput2 = parseInt($('input2').value, 10); } //TO TEST function doTheMultiCalc() { "use strict"; getInput(); var multiCalculation = userInput1 * userInput2; //TO TEST console.log(typeof (multiCalculation)); $('resultOutput').value = multiCalculation; return multiCalculation; } function doTheDivCalc() { "use strict"; getInput(); var divCalculation = userInput1 / userInput2; //TO TEST console.log(typeof (divCalculation)); $('resultOutput').value = divCalculation; return divCalculation; } //Event Handler Function function init() { "use strict"; $('multiply').addEventListener('click', doTheMultiCalc); $('divide').addEventListener('click', doTheDivCalc); } document.addEventListener('DOMContentLoaded', init); 

 <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>oLogin</title> <link rel="stylesheet" href="../css/reset.css"> <!-- Font --> <link rel="stylesheet" href="../css/style.css"> </head> <body> <label>1st Number</label><input id ="input1"><br><br> <label>2nd Number</label><input id ="input2"><br><br> <button id ="multiply">Multiply</button> <button id ="divide">divide</button><br><br> <label>Result is</label> <input id ="resultOutput"> </div> <script src="../js/app.js"></script> </body> </html>