CODEWITHSUNDEEP
javascriptmultiplication
SuperSpitter
SuperSpitter

Reputation: 177

Javascript - multiplying a value with itself

I want to write a script that multiplies any number in a text field with itself by the push of a button and gives the result as an alert. I'm completely new to Javascript (and have to write my first exam later today). The syntax is killing me, sometimes so similar to Java, but than again not.

Here's what I came up with so far:

<!DOCTYPE html>
<html>
<head>
<script>
function myMultiply()
{
var x= $('#num1').val();
var y= x*x;
alert(x+" times "+x+" equals "+y);
return false;
}
</script>
</head>

<body>

<input type="text" id="num1">

<button onclick="myMultiply()">Try it</button>

<p>By clicking the button above, the value in the text field will be multiplied with itself.</p>

</body>
</html>

Upvotes: 2

Views: 7850

Answers (5)

Keith
Keith

Reputation: 994

Your code is fine. You are simply missing the jquery include.

Add <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> right above your other script and everything works unchanged.

Javascript will parse strings and convert them to numbers automatically when it sees that you are trying to multiply. "4" * "2" is 8, not "44" or "42" or any other magical combination. You have a syntax error by referring to $ without actually including jQuery as a required script, so the function ends up being undefined.

<!DOCTYPE html>
<html>
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script type="text/javascript">
    function myMultiply()
    {
      var x= $('#num1').val();
      var y= x*x;
      alert(x+" times "+x+" equals "+y);
      return false;
    }
  </script>
</head>

<body>

<input type="text" id="num1">

<button onclick="myMultiply()">Try it</button>

<p>By clicking the button above, the value in the text field will be multiplied with itself.</p>

</body>
</html>

Upvotes: 0

Vinay Pratap Singh Bhadauria
Vinay Pratap Singh Bhadauria

Reputation: 9947

You cant multiply string it will be concatenated, parse value to int using parseInt first

parseInt

function myMultiply()
{
    var x= parseInt($('#num1').val(), 10);
    var y= x*x;
    alert(x+" times "+x+" equals "+y);
    return false;
}

Upvotes: 3

Dormouse
Dormouse

Reputation: 5188

Along with other answers indicating you should parseInt it should be noted that you aren't currently including jQuery (which gives you access to the $(".element") notation).

jQuery is a very common javascript library that saves a lot of time for very common Javascript tasks (selectors, events etc). You'll see the $() notation in many tutorials and to use it you need to include jQuery.

This will work:

<!DOCTYPE html>
<html>
<head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script>
        function myMultiply()
        {
                var x= parseInt( $('#num1').val(), 10 );
                var y= x*x;
                alert(x+" times "+x+" equals "+y);
                return false;
        }
        </script>
</head>

<body>

        <input type="text" id="num1" />
        <button onclick="myMultiply()">Try it</button>
        <p>By clicking the button above, the value in the text field will be multiplied with itself.</p>

</body>
</html>

Upvotes: 0

Amin Jafari
Amin Jafari

Reputation: 7207

try replacing var y=x*x; with var y=Number(x)*Number(x);

Upvotes: 0

okcoker
okcoker

Reputation: 1339

You'll want to make sure you parse the input value as it will be a string when you query for it. To operate on it using multiplication, you need a number. You'll usually want to pass 10 as the second radix parameter as there are different implementations of parseInt 

function myMultiply() {
    var x = parseInt($('#num1').val(), 10);
    var y = x*x;
    alert(x + " times " + x + " equals " + y);
    return false;
}

Upvotes: 4

Related Questions