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

Question

I am trying to do a simple calculation of two numbers that lets the user either multiply them or divide them. I know there are other ways do do this with way less code but I'd like to figure out why my result box is displaying NaN. I've tested to make sure the userInput1 and userInput2 variables are both indeed numbers but it looks like something is happening inside the other functions to make it 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">

`

I've tested to make sure the userInput1 and userInput2 variables are both indeed numbers No, you've tested whether whatever parseInt returns is of type number. — connexo
– connexo, Commented Jul 5, 2019 at 6:28

connexo · Accepted Answer · 2019-07-05 06:27:13Z

I commend your trying to figure this out. So there are two issues I see.

First and foremost, you're not actually getting the value of the inputs. You need to use $('input1').value to retrieve the actual value of the input.

You also need to fetch that value before doing each operation. Here you see it in action:

/*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">

SScotti · Accepted Answer · 2019-07-04 20:53:37Z

This might work.

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">

Laurent Raffalli · Accepted Answer · 2019-07-05 06:11:01Z

I found the solution for your app.js yesterday but i lost my internet and i was unable to respond

Annother solution create a function getInput() so there you can test if the value is an number ... is not empty etc... :

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>

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related