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的输入框中？

3 个答案: