Javascript - multiplying a value with itself

Question

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>

There are brilliant answers about Java vs. Javascript here: http://stackoverflow.com/questions/245062/whats-the-difference-between-javascript-and-java — Shomz, Feb 21 '14 at 07:12

score 4 · Answer 1 · answered Feb 21 '14 at 06:57

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

score 3 · Answer 2 · edited Jun 20 '20 at 09:12

3

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

edited Jun 20 '20 at 09:12

Community

1
1

answered Feb 21 '14 at 06:57

Vinay Pratap Singh Bhadauria

9,829
3
28
49

1

Set the base 10, please. Teach a beginner some nice principles. – Shomz Feb 21 '14 at 06:58
@Shomz sorry i am not able to get you. – Vinay Pratap Singh Bhadauria Feb 21 '14 at 07:05
1

It's a good practice to always specify the base for parseInt, like this: `var x= parseInt($('#num1').val(), 10);` – Shomz Feb 21 '14 at 07:07
3

From your own link: radix, An integer that represents the radix of the above mentioned string. Always specify this parameter to eliminate reader confusion and to guarantee predictable behavior. Different implementations produce different results when a radix is not specified. – Dormouse Feb 21 '14 at 07:08
1

@Shomz thanks, i will make sure to set base in any future answers using parse int, rajesh Cp thanks for the edit – Vinay Pratap Singh Bhadauria Feb 21 '14 at 07:09

score 0 · Answer 3 · answered Feb 21 '14 at 07:04

0

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

answered Feb 21 '14 at 07:04

Amin Jafari

7,157
2
18
43

score 0 · Answer 4 · answered Feb 21 '14 at 07:05

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>

Thanks a lot. I included parseInt and jQuery. But still my code doesn't work, nothing happens when I press the Try-Button. — SuperSpitter, Feb 21 '14 at 07:30
What browser are you using? If it's an older version of Internet Explorer then you'll need to add `type='javascript'` to your ` — Dormouse, Feb 21 '14 at 07:45

Keith · Answer 5 · 2014-02-21T09:43:40.603

0

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>

edited Feb 21 '14 at 09:43

answered Feb 21 '14 at 08:01

Keith

984
6
9

When I take the code exactly like you put it up there for me then I still don't get any alert message when pressing the button after entering any number... I really don't get why this won't work, seems like the function is never actually called... – SuperSpitter Feb 21 '14 at 08:16
Then tell us your browser version. And try the comment where you change ` – Keith Feb 21 '14 at 08:22
I even tried it in IE 9 and it works. Perhaps you have a popup-blocker in place? Do you see any error messages in a console? Tried it from different browsers? – Keith Feb 21 '14 at 08:24
I have Firefox 27.0.1 and also tried in IE. No chance. Other such scripts (with alerts) work fine (just not those written by me^^) – SuperSpitter Feb 21 '14 at 08:52
Always try to rule out what you do know, and what you don't. Try `console.log(y)` to verify that everything else works. If it does, you just have to find out why alerts aren't working. Perhaps you have it disabled because of too many popups. Restart the browser. Google for settings, etc. But tell us what you see in a different browser. Trust me. It works. It just doesn't alert you ;-) – Keith Feb 21 '14 at 08:54
Yuck. See this post: http://stackoverflow.com/questions/20810794/alert-and-console-log-not-working-in-firefox-26 – Keith Feb 21 '14 at 08:57
Or perhaps the browser is just protecting you if alerts work on other pages. Try renaming the file too and that would verify that FF is protecting you from that specific page. – Keith Feb 21 '14 at 09:10
I assume I would insert console.log(y) inside my function (put it above the alert statement), no reaction at all. – SuperSpitter Feb 21 '14 at 09:11
Yes. See the Yuck comment. People who are having this problem have it with alert() and console.log(). What does it look like in Chrome? You have to verify that it is just your specific installation of FF on this specific page and not your code! – Keith Feb 21 '14 at 09:14
Downloading Chrome ;-) – SuperSpitter Feb 21 '14 at 09:16
Okay. There were a couple of little problems. Needed http: before jquery include and I added type="text/javascript" just to be safe. Good news is that it didn't work in Chrome for me either! But now it does. I updated the code above, so just copy and retry. – Keith Feb 21 '14 at 09:44

Javascript - multiplying a value with itself

5 Answers5

parseInt