JavaScript Forum

**zxnet2k** · 07:07 AM

Hey everyone,

I've recently moved into a web development role and so I'm aiming to get as many coding languages learnt as possible. I've started learning JavaScript today, and have coded a JavaScript calculator. I initially had it working, then decided to convert the IF statment for determining the mathmatical symbol to a switch case statement instead. Unfortunately this has stopped it working and I am unsure as to why. I have posted my code below and would appreciate any and all comments as I'm looking to improve my JavaScripting skills

Code:

 
<html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>JS Calculator</title>
 <script language="JavaScript">
 
/* This Function places the value of the number button into the display box */
 
 function btnNumber(whichNumber)
 {
 Result.value=(Result.value + whichNumber);
 }
/* This function tells the script which calculation symbol has been chosen and resets the number display box */
 function btnMethod(whichMethod)
 {
 whichfirstValue = Result.value;
 methodValue = (whichMethod);
 Result.value = ("");
 }
/* This function carries out the sum based on  an If deciding how to calculate based on which calculation button was pressed */
 
 function btnResult()
 
 {
 whichValue = Result.value;
 switch(methodValue)
 {
  case "1":
  {whichResult = (parseInt(whichfirstValue) + parseInt(whichValue));
  alert(whichResult);}
  break;
 
  case "2":
  {whichResult = (whichfirstValue - whichValue);
  alert(whichResult);}
  break;
 
  case "3":
  {whichResult = (whichfirstValue * whichValue);
  alert(whichResult);}
  break;
 
  case "4":
  {whichResult = (whichfirstValue / whichValue);
  alert(whichResult);}
  break;
 
  default:
  alert("You must enter some numbers!";
 }
 
 
 }
 
/* Reset button */
 function btnClear()
 {
 Result.value = ("");
 }
 </script>
 
</head>
<body>
<textarea rows="1" cols="6" name="Result">
</textarea>
<br>
<br>
<button type="button" OnClick="btnMethod('1')">+</button>
<button type="button" OnClick="btnMethod('2')">-</button>
<button type="button" OnClick="btnMethod('3')">x</button>
<button type="button" OnClick="btnMethod('4')">/</button>
 
<button type="button" OnClick="btnResult()">=</button>
<br>
<br>
<button type="button" OnClick="btnNumber('1')">1</button>
<button type="button" OnClick="btnNumber('2')">2</button>
<button type="button" OnClick="btnNumber('3')">3</button>
<br>
<button type="button" OnClick="btnNumber('4')">4</button>
<button type="button" OnClick="btnNumber('5')">5</button>
<button type="button" OnClick="btnNumber('6')">6</button>
<br>
<button type="button" OnClick="btnNumber('7')">7</button>
<button type="button" OnClick="btnNumber('8')">8</button>
<button type="button" OnClick="btnNumber('9')">9</button>
<button type="button" OnClick="btnNumber('0')">0</button>
<br>
<br>
<button type="button" OnClick="btnClear()">CLEAR</button>
</body>
</html>

**Insensus** · 02-19-2009, 01:19 PM

You don't have to wrap expression in a switch statement in curly brackets.

So remove the { and } from
case "4":
{whichResult = (whichfirstValue / whichValue);
alert(whichResult);}
break;

==>

case "4":
whichResult = (whichfirstValue / whichValue);
alert(whichResult);
break;

**zxnet2k** · 02-20-2009, 05:13 AM

hi, thanks for the quick response

I've removed the brackets, but it's still generating an error:

"Object expected on line 95"

**Insensus** · 02-20-2009, 08:43 AM

I've been experimenting a little with your code, and I found that the following works:

Code:

 
<html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>JS Calculator</title>
 <script language="JavaScript">
 
/* This Function places the value of the number button into the display box */
 
 function btnNumber(whichNumber)
 {
 document.getElementById('Result').value=(document.getElementById('Result').value + whichNumber);
 }
/* This function tells the script which calculation symbol has been chosen and resets the number display box */
 function btnMethod(whichMethod)
 {
 whichfirstValue = document.getElementById('Result').value;
 methodValue = (whichMethod);
 document.getElementById('Result').value = ("");
 }
/* This function carries out the sum based on  an If deciding how to calculate based on which calculation button was pressed */
 
 function btnResult()
 
 {
 whichValue = document.getElementById('Result').value;
 switch(methodValue)
 {
  case "1":
  {whichResult = (parseInt(whichfirstValue) + parseInt(whichValue));
  alert(whichResult);}
  break;
 
  case "2":
  {whichResult = (whichfirstValue - whichValue);
  alert(whichResult);}
  break;
 
  case "3":
  {whichResult = (whichfirstValue * whichValue);
  alert(whichResult);}
  break;
 
  case "4":
  {whichResult = (whichfirstValue / whichValue);
  alert(whichResult);}
  break;
 
  default:
  alert("You must enter some numbers!");
 }
 
 
 }
 
/* Reset button */
 function btnClear()
 {
 document.getElementById('Result').value = ("");
 }
 </script>
 
</head>
<body>
<textarea rows="1" cols="6" id="Result">
</textarea>
<br>
<br>
<button type="button" OnClick="btnMethod('1')">+</button>
<button type="button" OnClick="btnMethod('2')">-</button>
<button type="button" OnClick="btnMethod('3')">x</button>
<button type="button" OnClick="btnMethod('4')">/</button>
 
<button type="button" OnClick="btnResult()">=</button>
<br>
<br>
<button type="button" OnClick="btnNumber('1')">1</button>
<button type="button" OnClick="btnNumber('2')">2</button>
<button type="button" OnClick="btnNumber('3')">3</button>
<br>
<button type="button" OnClick="btnNumber('4')">4</button>
<button type="button" OnClick="btnNumber('5')">5</button>
<button type="button" OnClick="btnNumber('6')">6</button>
<br>
<button type="button" OnClick="btnNumber('7')">7</button>
<button type="button" OnClick="btnNumber('8')">8</button>
<button type="button" OnClick="btnNumber('9')">9</button>
<button type="button" OnClick="btnNumber('0')">0</button>
<br>
<br>
<button type="button" OnClick="btnClear()">CLEAR</button>
</body>
</html>

Note: As you might notice, I've replaced Result.value with document.getElementById('Result').value and the textarea has now id="Result" instead of name="Result".
I did this because otherwise it will only work in Internet Explorer.
document.getElementById(''); is a much more supported function.

Note 2: Apparently, you don't have to remove the curly brackets. I didn't really expect that.

**zxnet2k** · 02-23-2009, 04:35 AM

ah brilliant, that works perfectly! I also noticed that I'd missed out a bracket as well which probably wasn't helping

Thanks very much