CODEWITHSUNDEEP
javascriptformsfunctionmathgetelementbyid
Jason Shaft
Jason Shaft

Reputation: 65

Javascript - Multiply two input fields together and display

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>

Upvotes: 1

Views: 16522

Answers (12)

Mohammad Ali Abdullah
Mohammad Ali Abdullah

Reputation: 331

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

Upvotes: 0

Ramesh Rajendran
Ramesh Rajendran

Reputation: 38683

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>

Upvotes: 2

Reshma G Nair
Reshma G Nair

Reputation: 21

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.

Upvotes: 0

Kevin Pimentel
Kevin Pimentel

Reputation: 1916

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);
}

Upvotes: 7

Faraz Irfan
Faraz Irfan

Reputation: 1326

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>

Upvotes: 4

hondvryer
hondvryer

Reputation: 442

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>

Upvotes: 3

brk
brk

Reputation: 50291

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>

Upvotes: 2

th3n3wguy
th3n3wguy

Reputation: 3737

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

Upvotes: 2

Ari Singh
Ari Singh

Reputation: 1296

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>

Upvotes: 2

NnN
NnN

Reputation: 463

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

Upvotes: 2

Nikhilesh Shivarathri
Nikhilesh Shivarathri

Reputation: 1670

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>

Upvotes: 2

CodeLover
CodeLover

Reputation: 569

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);
}

Upvotes: 3

Related Questions