SimpleCalculator

**mattzarr** · 03-28-2011 07:59 PM

Hello I am trying to make a simple calculator and don't know why my add, subtract, divide and multiply functions are not working?

Thanks in advance....

<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Docuemnt Title</title>
<meta name="Generator" content="EditPlus" />
<meta name ="Author" content ="Matthew Zarrillo" />
<meta name ="Keywords" content ="web site design" />
<meta name ="Description" content ="" />
<script>

function doClear(){

document.SimpleCalculator.fnumber.value="";
document.SimpleCalculator.snumber.value="";
document.SimpleCalculator.answer.value="";
}

function add() {
var fnum = parseInt(document.SimpleCalulator("fnumber").value);
var snum = parseInt(document.SimpleCalulator("snumber").value);
var answer = fnum+snum;
SimpleCalculator.answer.value = answer;
}

function subtract(){
var fnum = parseInt(document.SimpleCalulator("fnumber").value);
var snum = parseInt(document.SimpleCalulator("snumber").value);
var answer = fnum/snum;
SimpleCalculator.answer.value = answer;
}

function divide(){
var fnum = parseInt(document.SimpleCalulator("fnumber").value);
var snum = parseInt(document.SimpleCalulator("snumber").value);
var answer = fnum/snum;
SimpleCalculator.answer.value = answer;
}

function multiply(){
var fnum = parseInt(document.SimpleCalulator("fnumber").value);
var snum = parseInt(document.SimpleCalulator("snumber").value);
var answer = fnum*snum;
SimpleCalculator.answer.value = answer;
}

</script>
</head>

<body>
<h1> Intro to Javascript</h1>
<h1> Calculator Assignment</h1>
<form name="SimpleCalculator" >
First Number:<input name="fnumber" size="2"type="text">
<br />
<br />
Second Number: <input name="snumber" size="2"type="text">
<br />
<br />
<input type="button" value="Multiply" onClick="multiply()"/>
<input type="button" value="Divide" onClick="divide()"/>
<input type="button" value="Add" onClick="add()"/>
<input type="button" value="Subtract" onClick="subtract()"/>
<br />
<br />
Answer:<input name="answer" size="2"type="text">
<br />
<br />
<input type="button" value="Clear" onClick="doClear()"/>

</body>
</html>

**JMRKER** · 03-28-2011 09:13 PM

Numerous syntax errors. Use the error console to see them.
Specifically, you need to spell 'Calculator' the same way where ever you use it.
parseInt() function is OK, but faster just to multiply by 1 to convert string to a number.
document. prefix in front of all form references.

That's probably enough for now.

Code:

<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Docuemnt Title</title>
<meta name="Generator" content="EditPlus" />
<meta name ="Author" content ="Matthew Zarrillo" />
<meta name ="Keywords" content ="web site design" />
<meta name ="Description" content ="" />
<script>

function doClear(){
  document.SimpleCalculator.fnumber.value="";
  document.SimpleCalculator.snumber.value="";
  document.SimpleCalculator.answer.value="";
}

function add() {
  var fnum = document.SimpleCalculator.fnumber.value*1;
  var snum = document.SimpleCalculator.snumber.value*1;
  var answer = fnum+snum;
  document.SimpleCalculator.answer.value = answer;
}

function subtract(){
  var fnum = document.SimpleCalculator.fnumber.value*1;
  var snum = document.SimpleCalculator.snumber.value*1;
  var answer = fnum-snum;
  document.SimpleCalculator.answer.value = answer;
}

function divide(){
  var fnum = document.SimpleCalculator.fnumber.value*1;
  var snum = document.SimpleCalculator.snumber.value*1;
  var answer = fnum/snum;
  document.SimpleCalculator.answer.value = answer;
}

function multiply(){
var fnum = document.SimpleCalculator.fnumber.value*1;
var snum = document.SimpleCalculator.snumber.value*1;
var answer = fnum*snum;
document.SimpleCalculator.answer.value = answer;
}

</script>
</head>

<body>
<h1> Intro to Javascript</h1>
<h1> Calculator Assignment</h1>
<form name="SimpleCalculator" onsubmit="return false">
First Number:<input name="fnumber" size="2"type="text">
<br />
<br />
Second Number: <input name="snumber" size="2"type="text">
<br />
<br />
<input type="button" value="Multiply" onClick="multiply()"/>
<input type="button" value="Divide" onClick="divide()"/>
<input type="button" value="Add" onClick="add()"/>
<input type="button" value="Subtract" onClick="subtract()"/>
<br />
<br />
Answer:<input name="answer" size="6" type="text">
<br />
<br />
<input type="button" value="Clear" onClick="doClear()"/>

</body>
</html>

**mattzarr** · 03-28-2011 09:57 PM

Thanks for your help, it was a silly typo... How could you go about adding this function to my calculator ...
When the user first comes to the page the calculator is
invisible, and only an alert message is displayed. When the user clicks the message, the calculator is displayed.

**JMRKER** · 03-28-2011 10:32 PM

1. Surround your calculator display with the <div id="calculatorDisplay">...</div> tags
2. Use a toggle function or show_hide function to change the CSS style from 'none' to 'block'
3. Use some CSS style tags to initialize the #calculatorDisplay to display='none';

Should be fairly easy to do.

**mattzarr** · 03-29-2011 05:24 PM

Could you maybe show me an example?

Thanks

**JMRKER** · 03-29-2011 06:25 PM

Originally Posted by mattzarr

Could you maybe show me an example?

Thanks

You could at least make an attempt based on the information given.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Docuemnt Title</title>
<meta name="Generator" content="EditPlus" />
<meta name ="Author" content ="Matthew Zarrillo" />
<meta name ="Keywords" content ="web site design" />
<meta name ="Description" content ="" />
<script>

function doClear(){
  document.SimpleCalculator.fnumber.value="";
  document.SimpleCalculator.snumber.value="";
  document.SimpleCalculator.answer.value="";
}

function add() {
  var fnum = document.SimpleCalculator.fnumber.value*1;
  var snum = document.SimpleCalculator.snumber.value*1;
  var answer = fnum+snum;
  document.SimpleCalculator.answer.value = answer;
}

function subtract(){
  var fnum = document.SimpleCalculator.fnumber.value*1;
  var snum = document.SimpleCalculator.snumber.value*1;
  var answer = fnum-snum;
  document.SimpleCalculator.answer.value = answer;
}

function divide(){
  var fnum = document.SimpleCalculator.fnumber.value*1;
  var snum = document.SimpleCalculator.snumber.value*1;
  var answer = fnum/snum;
  document.SimpleCalculator.answer.value = answer;
}

function multiply(){
var fnum = document.SimpleCalculator.fnumber.value*1;
var snum = document.SimpleCalculator.snumber.value*1;
var answer = fnum*snum;
document.SimpleCalculator.answer.value = answer;
}

</script>
<style type="text/css">
#calculatorDisplay { display : none; }
</style>
</head>

<body>
<h1> Intro to Javascript</h1>
<h1>
 <button onclick="document.getElementById('calculatorDisplay').style.display='block'">Calculator Assignment</button>
</h1>
<form name="SimpleCalculator" onsubmit="return false">

<div id="calculatorDisplay">
First Number:<input name="fnumber" size="2"type="text">
<br />
<br />
Second Number: <input name="snumber" size="2"type="text">
<br />
<br />
<input type="button" value="Multiply" onClick="multiply()"/>
<input type="button" value="Divide" onClick="divide()"/>
<input type="button" value="Add" onClick="add()"/>
<input type="button" value="Subtract" onClick="subtract()"/>
<br />
<br />
Answer:<input name="answer" size="6" type="text">
<br />
<br />
<input type="button" value="Clear" onClick="doClear()"/>
</div>

</form>
</body>
</html>

**mattzarr** · 03-29-2011 06:39 PM

But how about having an alert box popup and then have the calculator show instead of having the button trigger the calculator

**JMRKER** · 03-29-2011 07:13 PM

Again ...

Originally Posted by JMRKER

You could at least make an attempt based on the information given.

**mattzarr** · 03-29-2011 07:51 PM

Okay then let me ask you this.

If i create an alert message in a function and then have it show the calculator, how would you call the function without using a button.???

**JMRKER** · 03-29-2011 08:17 PM

<body onload="xxx()">
or possibly
<body onload="alert('Get ready for my Calculator Display')">

My turn to ask a question. What tutorial or class are you learning from?

**mattzarr** · 03-29-2011 08:45 PM

Well I am new to the java script

function display(){

alert("Get ready for my calculator");

}

#calculatorDisplay

{ display : none; }

<body onload="display()">

I have done this now and got stuck again

i need the function to change the display property from none to block..
could you suggest anything ??
Thanks again !!!

**JMRKER** · 03-29-2011 08:53 PM

Well, you finally made an attempt.

Consider this...

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Docuemnt Title</title>
<meta name="Generator" content="EditPlus" />
<meta name ="Author" content ="Matthew Zarrillo" />
<meta name ="Keywords" content ="web site design" />
<meta name ="Description" content ="" />
<script>

function doClear(){
  document.SimpleCalculator.fnumber.value="";
  document.SimpleCalculator.snumber.value="";
  document.SimpleCalculator.answer.value="";
}

function add() {
  var fnum = document.SimpleCalculator.fnumber.value*1;
  var snum = document.SimpleCalculator.snumber.value*1;
  var answer = fnum+snum;
  document.SimpleCalculator.answer.value = answer;
}

function subtract(){
  var fnum = document.SimpleCalculator.fnumber.value*1;
  var snum = document.SimpleCalculator.snumber.value*1;
  var answer = fnum-snum;
  document.SimpleCalculator.answer.value = answer;
}

function divide(){
  var fnum = document.SimpleCalculator.fnumber.value*1;
  var snum = document.SimpleCalculator.snumber.value*1;
  var answer = fnum/snum;
  document.SimpleCalculator.answer.value = answer;
}

function multiply(){
var fnum = document.SimpleCalculator.fnumber.value*1;
var snum = document.SimpleCalculator.snumber.value*1;
var answer = fnum*snum;
document.SimpleCalculator.answer.value = answer;
}

function initializeCalculator() {
  alert('You are about to see my Calculator Assignment');
  document.getElementById('calculatorDisplay').style.display = 'block';
}

</script>
<style type="text/css">
#calculatorDisplay { display : none; }
</style>
</head>

<body onload="initializeCalculator()">
<h1> Intro to Javascript</h1>
<h1> Calculator Assignment </h1>
<!-- <button onclick="document.getElementById('calculatorDisplay').style.display='block'">Calculator Assignment</button> -->
<form name="SimpleCalculator" onsubmit="return false">

<div id="calculatorDisplay">
First Number:<input name="fnumber" size="2"type="text">
<br />
<br />
Second Number: <input name="snumber" size="2"type="text">
<br />
<br />
<input type="button" value="Multiply" onClick="multiply()"/>
<input type="button" value="Divide" onClick="divide()"/>
<input type="button" value="Add" onClick="add()"/>
<input type="button" value="Subtract" onClick="subtract()"/>
<br />
<br />
Answer:<input name="answer" size="6" type="text">
<br />
<br />
<input type="button" value="Clear" onClick="doClear()"/>
</div>

</form>
</body>
</html>

**mattzarr** · 03-29-2011 09:05 PM

Thanks !!!

Thread: SimpleCalculator

Thread Tools

Display

SimpleCalculator

Something to try ...

Thanks how about this

hmmm??

Okay..

okay ..

okay ..

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions