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>

JavaScript如何进行计算并显示在输入框中？

How to perform a calculation and display it in an input box in JavaScript?

javascript

ecmascript-5