JavaScript calculator not working correctly

Question

Matthew N. 0 Junior Poster in Training

14 Years Ago

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

gui javascript

3 Contributors
12 Replies
1K Views
1 Month Discussion Span
Latest Post 13 Years Ago Latest Post by rbsntl

Airshow 416 WiFi Lounge Lizard

14 Years Ago

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

Edited 14 Years Ago by Airshow because: n/a

Airshow 416 WiFi Lounge Lizard

14 Years Ago

Matthew,

Ok, so this would be the code?

Nearly. You still have a few things to fix.

Delete extra <script ....> tag
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 416 WiFi Lounge Lizard

14 Years Ago

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

Airshow

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Matthew N. 0 Junior Poster in Training · Answer 1 · 2010-10-11T10:47:09+00:00

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. 0 Junior Poster in Training · Answer 2 · 2010-10-12T00:01:34+00:00

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
    }

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 3 · 2010-10-12T00:27:10+00:00

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

Matthew N. 0 Junior Poster in Training · Answer 4 · 2010-10-12T00:33:58+00:00

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

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 5 · 2010-10-12T01:22:54+00:00

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

Airshow

Matthew N. 0 Junior Poster in Training · Answer 6 · 2010-10-12T08:27:28+00:00

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>

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 7 · 2010-10-12T08:51:50+00:00

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

Matthew N. 0 Junior Poster in Training · Answer 8 · 2010-10-12T09:18:26+00:00

Matthew N. 0 Junior Poster in Training

14 Years Ago

Thanks so much Airshow

rbsntl 0 Newbie Poster · Answer 9 · 2010-11-18T14:41:38+00:00

<html>
<head><title>test calculator</title>
<script language="javascript">
var num=0;
var result=0;
var take=0;
function call(num2)
{
num=num*10+num2;
document.calculator.my.value=num;
}

function call2()
{
num=num*10;
document.calculator.my.value=num;
}

function call3(num3)
{
result=num;
num=0;
    if(num3=="+")
    {
        take=1;
    }
    else
    if(num3=="-")
    {
        take=2;
    }
    else
    if(num3=="x")
    {
        take=3;
    }
    else
    if(num3=="/")
    {
    take=4;
    }
    else
    {
        take=0;
    }


}

function call4()
{
    if(take==1)
    {
        result+=num;
        document.calculator.my.value=result;
        num=result;
        result=0;
    }
    else
    if(take==2)
    {
        result=result-num;
        document.calculator.my.value=result;
        num=result;
        result=0;
    }
    else
    if(take==3)
    {
        result*=num;
        document.calculator.my.value=result;
        num=result;
        result=0;
    }
    else
    if(take=4)
    {
        result=result/num;
        document.calculator.my.value=result;
        num=result;
        result=0;
    }

}

function call5()
{
num=0;
result=0;
take=0;
document.calculator.my.value=" ";
}
</script>
</head>

<body background=flow-yellow.jpg>

  <form name="calculator">

  <table border=5 bordercolor=pink bgcolor="#ffffcc"><tr ><td>

<input type=text name="my" value=" "><br><br><br>
<p><input type=button value="  1  " onclick=call(1)>
<input type=button value="  2  " onclick=call(2)>
<input type=button value="  3  " onclick=call(3)>
<input type=button value="  4  " onclick=call(4)></p>
<p><input type=button value=" 5  " onclick=call(5)>
<input type=button value="  6  " onclick=call(6)>
<input type=button value="  7  " onclick=call(7)>
<input type=button value="  8  " onclick=call(8)></p>
<p>
<input type=button value="  9  " onclick=call(9)>
<input type=button value="  0  " onclick=call2()>
<input type=button value="  +  " onclick=call3("+")>
<input type=button value="  -  " onclick=call3("-")></p>
<p>
<input type=button value="  x  " onclick=call3("x")>
<input type=button value="  /  " onclick=call3("/")>
<input type=button value="  =  " onclick=call4()>
<input type=button value="Cancel" onclick=call5()></td></tr></table>
</form>
</body>
</html>