Javascript - Multiply two input fields together and display

Question

The idea is that I should be able to have two fields where I input numbers, then I need to display the sum as well as the product.
I figured I would test out the product, but I keep getting a "Not a Number" error. Any help Would be great!

<!DOCTYPE html>
<html>
  <body>

    <form>
        First Number<br>
        <input id="num1" type="text" name="num1">
    <br>
        Second Number:<br>
        <input id="num2" type="text" name="num2">
        <br><br>
      <input type="button" value="Do Maths" onclick="doMath();" />
    </form>

  <script>

      function doMath() {
          var numOne = document.getElementById('num1').value;
          var numTwo = document.getElementById('num2').value;
          var theProduct = parseInt(my_input1) * parseInt(my_input2);  document.write(theProduct);
          document.write(theProduct);


}

  </script>


  </body>
</html>

Hi, my_input1 and my_input2 is not defined. numOne and numTwo should the params — CodeLover
– CodeLover, Commented Feb 16, 2018 at 6:01

Kevin Pimentel · Accepted Answer · 2018-02-16 06:52:37Z

You have my_input1 and my_input2 which are not defined.

Change this line:

var theProduct = parseInt(my_input1) * parseInt(my_input2); document.write(theProduct);

This should be the correct line:

var theProduct = parseInt(numOne) * parseInt(numTwo); document.write(theProduct);

And obviously if you want the sum do:

var theTotal = parseInt(numOne) + parseInt(numTwo);

and print it out with: document.write(theTotal);

Additionally I wanted to add one more thing to my answer. If you are just testing, use this instead and view it in your console:

console.log("Product: " + theProduct);
console.log("Total: " + theTotal);

If you write to the document the way you are doing, you are going to remove everything, which means you'll need to refresh for every input. Not sure if you were aware of that. In any event, here's the function for reference.

function doMath() {
      var numOne = document.getElementById('num1').value;
      var numTwo = document.getElementById('num2').value;
      var theProduct = parseInt(numOne) * parseInt(numTwo);
      var theTotal = parseInt(numOne) + parseInt(numTwo);
      // document.write(theProduct);
      // document.write(theTotal);
      console.log("Product: " + theProduct);
      console.log("Total: " + theTotal);
}

CodeIt · Accepted Answer · 2018-02-16 06:34:04Z

4

Here is your correct verison of code, in the above code you have not defined my_input1 and my_input2

function doMath() {
  var numOne = document.getElementById('num1').value;
  var numTwo = document.getElementById('num2').value;
  var theProduct = parseInt(numOne) * parseInt(numTwo);
  document.write(theProduct);
}

<!DOCTYPE html>
<html>

<body>
  <form>
    First Number<br>
    <input id="num1" type="text" name="num1">
    <br> Second Number:<br>
    <input id="num2" type="text" name="num2">
    <br><br>
    <input type="button" value="Do Maths" onclick="doMath()" />
  </form>
</body>

</html>

edited Feb 16, 2018 at 6:34

CodeIt

3,6283 gold badges28 silver badges37 bronze badges

answered Feb 16, 2018 at 6:07

Faraz Irfan

1,3263 gold badges10 silver badges17 bronze badges

1 Comment

karadayi Over a year ago

Did you check to calculate decimals?

CodeLover · Accepted Answer · 2018-02-16 06:03:02Z

3

Should be like this

function doMath() {
    var numOne = document.getElementById('num1').value;
    var numTwo = document.getElementById('num2').value;
    var theProduct = parseInt(numOne) * parseInt(numTwo);    
    document.write(theProduct);
}

answered Feb 16, 2018 at 6:03

CodeLover

5692 silver badges11 bronze badges

Comments

ankita patel · Accepted Answer · 2018-02-16 06:24:09Z

3

This code works

function doMath() {
  var numOne = document.getElementById('num1').value;
  var numTwo = document.getElementById('num2').value;
  var theProduct = parseInt(numOne) * parseInt(numTwo);
  var p = document.getElementById('theProduct');
  p.innerHTML += theProduct;
}

<div>
  First Number<br>
  <input id="num1" type="text" name="num1"><br> Second Number:<br>
  <input id="num2" type="text" name="num2">
  <br><br>
  <input type="button" value="Do Maths" onclick="doMath()" />
</div>
<div id="theProduct"></div>

edited Feb 16, 2018 at 6:24

ankita patel

4,2511 gold badge15 silver badges28 bronze badges

answered Feb 16, 2018 at 6:06

hondvryer

4521 gold badge3 silver badges19 bronze badges

Comments

Nikhilesh Shivarathri · Accepted Answer · 2018-02-16 06:03:18Z

2

I see that everything you've writtern is okay! except that you've a typo in your code for my_input1 should be numOne and same for the second input too. Check the snippet below

function doMath() {
          var numOne = document.getElementById('num1').value;
          var numTwo = document.getElementById('num2').value;
          var theProduct = parseInt(numOne) * parseInt(numTwo); 
          document.write(theProduct);


}

<form>
        First Number<br>
        <input id="num1" type="text" name="num1">
    <br>
        Second Number:<br>
        <input id="num2" type="text" name="num2">
        <br><br>
      <input type="button" value="Do Maths" onclick="doMath();" />
    </form>

answered Feb 16, 2018 at 6:03

Nikhilesh Shivarathri

1,68011 silver badges16 bronze badges

Comments

NnN · Accepted Answer · 2018-02-16 06:04:29Z

2

<html>
  <body>

    <form>
        First Number<br>
        <input id="num1" type="text" name="num1">
    <br>
        Second Number:<br>
        <input id="num2" type="text" name="num2">
        <br><br>
      <input type="button" value="Do Maths" onClick="javascript:doMath();" />
    </form>
    </body>
    </html>
    <script>
    function doMath() {
          var numOne = document.getElementById('num1').value;
          var numTwo = document.getElementById('num2').value;
          var theProduct = (parseInt(numOne) * parseInt(numTwo));
          console.log('Product:' + theProduct + '\nSum: ' + (parseInt(numOne) + parseInt(numTwo)));
    }
    </script>

answered Feb 16, 2018 at 6:04

NnN

4733 silver badges11 bronze badges

Comments

Ari Singh · Accepted Answer · 2018-02-16 06:07:13Z

You have parseInt(my_input1) - there is no my_input1. Here is the corrected working example.

      function doMath() {
          var numOne = document.getElementById('num1').value;
          var numTwo = document.getElementById('num2').value;
          var theProduct = parseInt(numOne) * parseInt(numTwo);     console.log (theProduct);
          document.getElementById('ans').innerHTML = theProduct;
          }

<!DOCTYPE html>
<html>
  <body>

    <form>
        First Number<br>
        <input id="num1" type="text" name="num1">
    <br>
        Second Number:<br>
        <input id="num2" type="text" name="num2">
        <br><br>
      <input type="button" value="Do Maths" onclick="doMath();" /><p/>
        Product: <span id="ans"></span>
    </form>



  </body>
</html>

th3n3wguy · Accepted Answer · 2018-02-16 06:08:13Z

// Your function here:
/*function doMath() {
  var numOne = document.getElementById('num1').value;
  var numTwo = document.getElementById('num2').value;
  var theProduct = parseInt(my_input1) * parseInt(my_input2);
  document.write(theProduct);
  document.write(theProduct);
}*/

// New Function
function doMath() {
  var stringVals = [
    document.getElementById('num1').value,
    document.getELementById('num2').value
  ];
  
  var actualVals = vals.map((val) => parseInt(val))
    .filter((val) => !isNaN(val));
    
  var sum = actualVals.reduce((currentVal, nextVal) => currentVal + nextVal, 0);
  var product = actualVals.reduce((currentVal, nextVal) => currentVal * nextVal, 1);
  
  document.getElementById('theSum').innerHTML = 'Sum: ' + sum;
  document.getElementById('theProduct').innerHTML = 'Product: ' + product;
}

<!DOCTYPE html>
<html>
  <body>

    <form>
      First Number
      <br />
      <input id="num1" type="text" name="num1">
      <br />
      Second Number:
      <br />
      <input id="num2" type="text" name="num2">
      <br /><br />
      <input type="button" value="Do Maths" onclick="doMath();" />
      <div id="theSum"></div>
      <div id="theProduct"></div>
    </form>
    
    <script>
      // Include the JS from the snippet here.
    </script>
  </body>
</html>

Ramesh Rajendran · Accepted Answer · 2018-02-16 06:12:55Z

2

Instead of my_input1 & my_input2 use parseInt(numOne, 10) * parseInt(numTwo, 10); .Also note when using parseInt pass the radix

function doMath() {
  var numOne = document.getElementById('num1').value;
  var numTwo = document.getElementById('num2').value;
  var theProduct = parseInt(numOne, 10) * parseInt(numTwo, 10);
  document.write(theProduct);
}

<form>
  First Number<br>
  <input id="num1" type="text" name="num1">
  <br> Second Number:<br>
  <input id="num2" type="text" name="num2">
  <br><br>
  <input type="button" value="Do Maths" onclick="doMath();" />
</form>

edited Feb 16, 2018 at 6:12

Ramesh Rajendran

38.9k49 gold badges159 silver badges241 bronze badges

answered Feb 16, 2018 at 6:04

brk

50.3k10 gold badges59 silver badges85 bronze badges

2 Comments

brk Over a year ago

because there are two document.write(theProduct);

Ramesh Rajendran Over a year ago

Lol! I removed that. :p

Ramesh Rajendran · Accepted Answer · 2018-02-16 09:26:46Z

2

All other answers are good which means you defined your object name incorrectly. But I just added extra way to without working with parseInt() .

If you use those input type="number" instead of type="text" then you don't need to do ParseInt().

function doMath() {
  var numOne = document.getElementById('num1').value;
  var numTwo = document.getElementById('num2').value;
  var theProduct = numOne * numTwo;
  document.write(theProduct);
}

<form>
  First Number<br>
  <input id="num1" type="number" name="num1">
  <br> Second Number:<br>
  <input id="num2" type="number" name="num2">
  <br><br>
  <input type="button" value="Do Maths" onclick="doMath();" />
</form>

edited Feb 16, 2018 at 9:26

answered Feb 16, 2018 at 6:16

Ramesh Rajendran

38.9k49 gold badges159 silver badges241 bronze badges

Comments

Reshma G Nair · Accepted Answer · 2018-02-16 07:27:21Z

Only one small change you have to do for this code :

<!DOCTYPE html>
<html>
  <body>

    <form>
        First Number<br>
        <input id="num1" type="text" name="num1">
    <br>
        Second Number:<br>
        <input id="num2" type="text" name="num2">
        <br><br>
      <input type="button" value="Do Maths" onclick="doMath();" />
    </form>

  <script>

      function doMath() {
          var numOne = document.getElementById('num1').value;
          var numTwo = document.getElementById('num2').value;
          var theProduct = parseInt(numOne) * parseInt(numTwo);  
          document.write(theProduct);


}

  </script>


  </body>
</html>

OR

<!DOCTYPE html>
<html>
  <body>

    <form>
        First Number<br>
        <input id="num1" type="text" name="num1">
    <br>
        Second Number:<br>
        <input id="num2" type="text" name="num2">
        <br><br>
      <input type="button" value="Do Maths" onclick="doMath();" />
    </form>

  <script>

      function doMath() {
          var my_input1 = document.getElementById('num1').value;
          var my_input2 = document.getElementById('num2').value;
          var theProduct = parseInt(my_input1) * parseInt(my_input2);  
          document.write(theProduct);


}

  </script>


  </body>
</html>

use the declared variable for operation to be performed.

Mohammad Ali Abdullah · Accepted Answer · 2020-01-25 08:03:02Z

    <!DOCTYPE html>
    <html>
      <body>

        <form>
            First Number<br>
            <input id="num1" type="text" name="num1">
        <br>
            Second Number:<br>
            <input id="num2" type="text" name="num2">
            <br><br>
          <input type="button" value="Do Maths" onclick="doMath();" />
        </form>

      <script>

          function doMath() {
              var numOne = document.getElementById('num1').value;
              var numTwo = document.getElementById('num2').value;
              var theProduct = parseInt(numOne) * parseInt(numTwo); 
              document.write(theProduct);
    }
// or
//       function doMath() {
//           var numOne = document.getElementById('num1').value;
//           var numTwo = document.getElementById('num2').value;
//           var theProduct = parseFloat(numOne) * parseFloat(numTwo); 
//           document.write(theProduct);
// }

      </script>
      </body>
    </html>

Collectives™ on Stack Overflow

Javascript - Multiply two input fields together and display

12 Answers 12

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

12 Answers 12

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related