PDA

View Full Version : looking to create javascript calculator



tomwaits4noman
03-15-2009, 10:44 AM
I am trying to create a basic javascript calculator

the problem is that I can code it to add and minus or multiple and divide but not all four functions using the code I have below.

thanks

<html>
<head>
<title>Template</title>
<script>

function add(numID1, numID2)
{
var myString = "";
var num1 = document.getElementById(numID1).value;
num1 *= 1;

var num2 = document.getElementById(numID2).value;
num2 *= 1;

op = document.getElementById('opChoice').value;

if(op == 'divide')
ans = num1 / num2;
else
ans = num1 * num2;
myString = ans;
document.getElementById('content').innerHTML = myString;

}

function pickOp(val)
{
if(val.length > 0)
document.getElementById('opChoice').value = val;
}
</script>
<link rel="stylesheet" href="style/layout.css" media="screen" />
</head>
<body>
<div id="container">
<div id="header">
<br />
Header info goes here
</div>
<div id="submenu">
</div>
<div id="navmenu">
<input type="text" id="num1" value="0" /><br />
<select onChange="pickOp(this.value);">
<option value="" />
<option value="divide" />Divide
<option value="multiple" />Multiple
</select>
<input type="text" id="opChoice" value="divide" /><br />
<input type="text" id="num2" value="0" /><br />
<button onClick="add('num1', 'num2');">Equals</button><br />
</div>
<div id="content">
Content goes here
</div>
</div>
</body>
</html>

tomwaits4noman
03-15-2009, 11:56 AM
to update I think I found the solution but have a problem implementing it,

feel a

else conditional statements or switch statements

would work but its not working

Twey
03-15-2009, 08:13 PM
Here: http://dynamicdrive.com/forums/showthread.php?t=41865

I think that you would benefit from a tutorial (http://www.howtocreate.co.uk/tutorials/javascript/important).

Falkon303
03-16-2009, 02:52 AM
I am trying to create a basic javascript calculator

the problem is that I can code it to add and minus or multiple and divide but not all four functions using the code I have below.

thanks

<html>
<head>
<title>Template</title>
<script>

function add(numID1, numID2)
{
var myString = "";
var num1 = document.getElementById(numID1).value;
num1 *= 1;

var num2 = document.getElementById(numID2).value;
num2 *= 1;

op = document.getElementById('opChoice').value;

if(op == 'divide')
ans = num1 / num2;
else
ans = num1 * num2;
myString = ans;
document.getElementById('content').innerHTML = myString;

}

function pickOp(val)
{
if(val.length > 0)
document.getElementById('opChoice').value = val;
}
</script>
<link rel="stylesheet" href="style/layout.css" media="screen" />
</head>
<body>
<div id="container">
<div id="header">
<br />
Header info goes here
</div>
<div id="submenu">
</div>
<div id="navmenu">
<input type="text" id="num1" value="0" /><br />
<select onChange="pickOp(this.value);">
<option value="" />
<option value="divide" />Divide
<option value="multiple" />Multiple
</select>
<input type="text" id="opChoice" value="divide" /><br />
<input type="text" id="num2" value="0" /><br />
<button onClick="add('num1', 'num2');">Equals</button><br />
</div>
<div id="content">
Content goes here
</div>
</div>
</body>
</html>


innerHTML is of the devil. :|