954,566 Members — Technology Publication meets Social Media
Username:
Password:
Lost login information?
Have something to say? Contribute New Article Reply to this Article

JavaScript calculator not working correctly

Hello,
I have a JavaScript calculator, here is the code:

<script type="text/javascript">
var num1=prompt('Enter your first number',"");
var num2=prompt('Enter your second number',"");
var problem=prompt('Enter the operator you wish to use..x,X,+,-,/ are valid..',"");
if    (problem=="+")
    {
        alert("The anwser to your equasion is "num1+num2);
    }
else if (problem=="-")
    {
        alert("The answer to your equasion is "+num1-num2);
    }
else if (problem=="/")
    {
        alert("The answer to your equasion is "+num1/num2);
    }
else if (problem=="x")
    {
        alert("The answer to your equasion is "+num1*num2);
    }
else if (problem=="X")
    {
        alert("The answer to your equasion is "+num1*num2);
    }
else
    {
    alert("Sorry, we don't understand that equasion");
    }
</script>

It will open when the page comes up, but how do I put it so that it opens when the user clicks a button?
Thanks

Matthew N.
Junior Poster
101 posts since Jul 2010
Reputation Points: 10
Solved Threads: 10
 

Matthew,

First, convert your code into a function :

function calc() {
  //your statements go here
}

Now add this below the function :

onload = function() {//perform the following statements after the page has loaded
  var c = document.getElementById('calculator');//find the "Calculator" button
  c.onclick = calc;//run the "calc" function when button is clicked
};

Now add this to the body of the document :

<button id="calculator">Calculator</button>

That should do it.Airshow

Airshow
WiFi Lounge Lizard
Moderator
2,683 posts since Apr 2009
Reputation Points: 321
Solved Threads: 372
 

Ok, so this would be the code?

<html>
<head>
<script type="text/javascript">
function calc() {
<script type="text/javascript">
var num1=prompt('Enter your first number',"");
var num2=prompt('Enter your second number',"");
var problem=prompt('Enter the operator you wish to use..x,X,+,-,/ are valid..',"");
if    (problem=="+")
    {
        alert("The anwser to your equasion is "num1+num2);
    }
else if (problem=="-")
    {
        alert("The answer to your equasion is "+num1-num2);
    }
else if (problem=="/")
    {
        alert("The answer to your equasion is "+num1/num2);
    }
else if (problem=="x")
    {
        alert("The answer to your equasion is "+num1*num2);
    }
else if (problem=="X")
    {
        alert("The answer to your equasion is "+num1*num2);
    }
else
    {
    alert("Sorry, we don't understand that equasion");
    }

}
onload = function() {//perform the following statements after the page has loaded
  var c = document.getElementById('calculator');//find the "Calculator" button
  c.onclick = calc;//run the "calc" function when button is clicked
};
</script>
</head>
<body>
<button id="calculator">Calculator</button>
</body>
</html>
Matthew N.
Junior Poster
101 posts since Jul 2010
Reputation Points: 10
Solved Threads: 10
 

Matthew,
Ok, so this would be the code?
Nearly. You still have a few things to fix.Delete extra
Convert num1 and num2 from String to Number as follows: var num1 = Number(prompt('Enter your first number',"")); . Same for num2.
In the "add" alert, add missing "+" for string concatenation.
In the "add" alert, protect the mathematical addition with brackets - (num1+num2) - otherwise 6 + 7 will give 67 (string concatenation).
Airshow

Airshow
WiFi Lounge Lizard
Moderator
2,683 posts since Apr 2009
Reputation Points: 321
Solved Threads: 372
 

Oh yes, another thing: "equation" not "equasion".

Airshow

Airshow
WiFi Lounge Lizard
Moderator
2,683 posts since Apr 2009
Reputation Points: 321
Solved Threads: 372
 

I found the 6+7 = 67 thing out.. Just didn't know how to fix it.
I've tested it, I think I put the + in the right place
But, I either get no answer output, or 67 for 6+7
This is what I've changed: (Oh, also, should it be double or single brackets?)

if    (problem=="+")
    {        
      alert("The anwser to your equasion is "(+num1+num2)); <--Thats the double braces bit
    }
Matthew N.
Junior Poster
101 posts since Jul 2010
Reputation Points: 10
Solved Threads: 10
 

Nearly there. Try this:

if (problem=="+")
    {        
      alert("The anwser to your equation is "+(num1+num2)); <--Thats the double braces bit
    }

Outer brackets for the alert and inner brackets to ensure mathematical addition of the numbers prior to concatenating the result to the end of the text.

If you still get 6 + 7 = 67, then it's because 6 and 7 haven't been type-converted to Numbers (see my earlier post).

For mathematical operators other than +, type-conversion will be automatic but JavaScript's + is ambiguous; it adds Numbers but concatenates Strings. If one operand is a String and the other a Number, then it treats both as String and concatenates. (Hence your need for the inner brackets).Airshow

Airshow
WiFi Lounge Lizard
Moderator
2,683 posts since Apr 2009
Reputation Points: 321
Solved Threads: 372
 

But, none of them work, if I type 6x7 in it, it wont display anything

Matthew N.
Junior Poster
101 posts since Jul 2010
Reputation Points: 10
Solved Threads: 10
 

Matthew, you'd best post your whole code. I'll see what's wrong.

Airshow

Airshow
WiFi Lounge Lizard
Moderator
2,683 posts since Apr 2009
Reputation Points: 321
Solved Threads: 372
 

Ok, here it is:

<html>
<head>
<script type="text/javascript">
function calc() {
var num1 = Number(prompt('Enter your first number',""));
var num2 = Number(prompt('Enter your second number',""));
var problem=prompt('Enter the operator you wish to use..x,X,+,-,/ are valid..',"");
if    (problem=="+")
    {
        alert("The anwser to your equasion is "(+num1+num2));
    }
else if (problem=="-")
    {
        alert("The answer to your equasion is "(+num1-num2));
    }
else if (problem=="/")
    {
        alert("The answer to your equasion is "(+num1/num2));
    }
else if (problem=="x")
    {
        alert("The answer to your equasion is "(+num1*num2));
    }
else if (problem=="X")
    {
        alert("The answer to your equasion is "(+num1*num2));
    }
else
    {
    alert("Sorry, we don't understand that equasion");
    }

}
onload = function() {//perform the following statements after the page has loaded
  var c = document.getElementById('calculator');//find the "Calculator" button
  c.onclick = calc;//run the "calc" function when button is clicked
};
</script>
</head>
<body>
<button id="calculator">Calculator</button>
</body>
</html>
Matthew N.
Junior Poster
101 posts since Jul 2010
Reputation Points: 10
Solved Threads: 10
 

Change :

alert("The anwser to your equasion is "(+num1+num2));

to :

alert("The anwser to your equation is "+(num1+num2));

And similarly for the other four calculation lines.

Airshow

Airshow
WiFi Lounge Lizard
Moderator
2,683 posts since Apr 2009
Reputation Points: 321
Solved Threads: 372
 

Thanks so much Airshow

Matthew N.
Junior Poster
101 posts since Jul 2010
Reputation Points: 10
Solved Threads: 10
 
rbsntl
Newbie Poster
1 post since Sep 2010
Reputation Points: 10
Solved Threads: 0
 

This question has already been solved

Post: Markdown Syntax: Formatting Help
You
View similar articles that have also been tagged: