javascript dynamically generated calculator - via DOM firefox compatible (IE is not supported)
|
|
|
Question / Problem
|
The project is to implement a simple calculator using HTML and JavaScript program. A
sample layout for the calculator is shown below. I t has the four arithmetic functions, +, -, *
(for multiply) and / (for division). There are the 10 digits, the decimal point button and the
equals sign to get the result.
Instructions
1. For dynamic creation of the “TABLE” there are two approaches
a. Table Object Model
b. Document Object Model (DOM)
Use DOM as DOM is powerful in that it allows you to use script to manipulate any element of a document.
|
Solution
|
<!-- HTML Code -- name this calc.html -->
<html>
<head>
<title>
Javascript Assignment
</title>
<script language="javascript" src="Calc.js">
</script>
</head>
<body>
<select name=choose id=combo1 onChange=hideShowCalc() title="select">
<option value=0>Select Hide/Show</option>
<option value=1>Hide Calculator</option>
<option value=2>Show Calculator</option>
</select>
<Table name=tableCalc id=tab1>
</Table>
<body>
</html>
//////////////////////////////////////////////////////////////////////////////////////////////////////////////
// javascript file -- name this Calc.js
/* variables representing the calculator state */
var calcDrawn = 0 ; // flag representing if the calculator is drawn or not
var firstNum=0; // variable to save first number in binary operation
var oper=""; // variable to save operation going to implemented
var deci=0; // flag representing if number contain decimal or not
var reset=0; // Reset screen after operator press
var lock=0;
// function controlling hide/show of calculator on combobox selection
function hideShowCalc()
{
var hideCalc = 1 ;
var showCalc = 2 ;
operation = document.getElementById('combo1').value;
var table = document.getElementById('tab1');
document.getElementById('combo1').value=0;
if(operation == hideCalc)
{
if(window.confirm("Do u really want to hide calculator"))
{
table.style.visibility="hidden";
}
}
if(operation == showCalc)
{
if(window.confirm("Do u really want to Show calculator"))
{
if(!calcDrawn)
{
drawCalc(table);
table.style.visibility="visible";
calcDrawn = 1;
}
else
{
table.style.visibility="visible";
}
}
}
}
// function to draw calcultor on table tablecalc
function drawCalc(tableCalc)
{
var buttons = new Array("1","2","3","4","5","6","7","8","9","0","/","*","+","-",".","=/C");
tableCalc.border=2;
var textRow=document.createElement('tr') // not supported by IE
var textCell=document.createElement('td') // not supported by IE
textCell.colSpan=3;
var screen=document.createElement('input');
screen.id='screen'
screen.type='text'
screen.disabled='disabled'
textCell.appendChild(screen)
textRow.appendChild(textCell)
tableCalc.appendChild(textRow)
for (var rows = 0; rows < 4;rows++)
{
var row=document.createElement('tr') // not supported by IE
for (var cols=0;cols<4;cols++)
{
var col=document.createElement('td') // not supported by IE
var cell=document.createElement('button')
cell.id='cell'+rows+cols
cell.style.width=40
var buttonText=document.createTextNode(buttons[rows*4+cols])
cell.appendChild(buttonText)
cell.onclick=new Function( 'DoCalc("'+ buttons[rows*4+cols] + '")')
col.appendChild(cell)
row.appendChild(col)
}
tableCalc.appendChild(row)
}
}
// function to provide calculation for each button press and change state of calculator
function DoCalc(val)
{
if(!lock)
{
// provides one time press of decimal button
if(val=="." && !deci)
{
if(reset)
{
document.getElementById('screen').value="0"+val;
deci=1;
reset=0;
}
else
{
document.getElementById('screen').value+=val;
deci=1;
}
}
// checks if the digits are pressed
if (val in {1:1,2:1,3:1,4:1,5:1,6:1,7:1,8:1,9:1,0:1})
if(document.getElementById('screen').value=="0" || reset)
{
document.getElementById('screen').value=val;
reset=0;
}
else
document.getElementById('screen').value+=val;
// checks if the operator are pressed
if(val in {"+":1, "-":1, "*":1, "/
|
Applies to |
|
JavaScript
|
Rank It |
|
