javascript - 如何在 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">