PDA

View Full Version : Calculator Help



jesders88
Mar 21st, 2013, 09:36 PM
So here is the problem ....
This calculator below works as follows..
The only problem is I want to get away from onclick
I want to use an Event Listener such as ('click', example, false);

can someone help me convert this calculator I have to use with event listeners instead of onclick

Thank you




<!doctype html>
<head>
<!-- JavaScript function declarations -->
<script type="text/javascript" src="script.js"> </script>
</head>
<body>
<div class="calc">
<h1>Justin's Calculator</h1>
<!-- form for user input that represents a calculator -->
<form name="frmCalc" id="frmCalc">
<!-- Text Box to enter a numeric value -->
<input type="text" name="txtNumber" value="" size="20" /><br /><br/>
<!-- Number Buttons 1-3 -->
<input type="button" value="1" name="btn1" id = "btn1" onclick="window.document.frmCalc.txtNumber.value = window.document.frmCalc.txtNumber.value + 1;"/>
<input type="button" value="2" name="btn2" id = "btn2" onclick="window.document.frmCalc.txtNumber.value = window.document.frmCalc.txtNumber.value + 2;"/>
<input type="button" value="3" name="btn3" id = "btn3" onclick="window.document.frmCalc.txtNumber.value = window.document.frmCalc.txtNumber.value + 3;"/>
<!-- Add Button-->
<input type="button" value="+" name="btnPlus" id = "btnAdd" onclick="window.add(window.document.frmCalc.txtNumber.value);"/><br/>
<!-- Number Buttons 4-6 -->
<input type="button" value="4" name="btn4" id = "btn4" onclick="window.document.frmCalc.txtNumber.value = window.document.frmCalc.txtNumber.value + 4;"/>
<input type="button" value="5" name="btn5" id = "btn5" onclick="window.document.frmCalc.txtNumber.value = window.document.frmCalc.txtNumber.value + 5;"/>
<input type="button" value="6" name="btn6" id = "btn6" onclick="window.document.frmCalc.txtNumber.value = window.document.frmCalc.txtNumber.value + 6;"/>
<!-- Subtract Button -->
<input type="button" value="-" name="btnMinus" id = "btnMinus" onclick="window.sub(window.document.frmCalc.txtNumber.value);"/><br/>
<!-- Number Buttons 7-9 -->
<input type="button" value="7" name="btn7" id = "btn7" onclick="window.document.frmCalc.txtNumber.value = window.document.frmCalc.txtNumber.value + 7;"/>
<input type="button" value="8" name="btn8" id = "btn8" onclick="window.document.frmCalc.txtNumber.value = window.document.frmCalc.txtNumber.value + 8;"/>
<input type="button" value="9" name="btn9" id = "btn9" onclick="window.document.frmCalc.txtNumber.value = window.document.frmCalc.txtNumber.value + 9;"/>
<!-- Divide Button -->
<input class="implement" type="button" value="/" name="btnDivide" id = "btnDivide" onclick="window.div(window.document.frmCalc.txtNumber.value);"/><br/>
<!-- Clear Button -->
<input type="reset" name="btnReset" value="Clear" id = "btnClear"/>
<!-- Number Button 0 -->
<input type="button" value="0" name="btn0" id = "btn0" onclick="window.document.frmCalc.txtNumber.value = window.document.frmCalc.txtNumber.value + 0;"/>
<!-- Decimal Button -->
<input type="button" value="." name="btnDecimal" onclick="window.dec(window.document.frmCalc.txtNumber.value);"/>
<!-- Multiply Button -->
<input class="implement" type="button" value="*" name="btnTimes" id = "btnTimes" onclick="window.mul(window.document.frmCalc.txtNumber.value);"/><br/>
<!-- Calculate Button -->
<input type="button" name="btnCalc" value="Calculate" id = "btnCalc" onclick="calc(window.document.frmCalc.txtNumber);"/>
</form>
</div>
</body>
</html>



var lastNum = 0;
var firstVal;
var secondVal;
var operator = "";



function add(firstVal)
{
if(firstVal == "")
{
window.alert("Enter a value");
}
else
{
lastNum = parseFloat(firstVal);
operator = "ADD";
window.document.frmCalc.txtNumber.value = ""
}
}

function sub(secondVal)
{
if(secondVal == "")
{
window.alert("Enter a value");
}
else
{
lastNum = parseFloat(secondVal);
operator = "SUBTRACT";
window.document.frmCalc.txtNumber.value = ""
}
}

function mul(secondVal)
{
if(secondVal == "")
{
window.alert("Enter a value");
}
else
{
lastNum = parseFloat(secondVal);
operator = "MULTIPLY";
window.document.frmCalc.txtNumber.value = ""
}
}

function div(secondVal)
{
if(secondVal == "")
{
window.alert("Enter a value");
}
else
{
lastNum = parseFloat(secondVal);
operator = "DIVIDE";
window.document.frmCalc.txtNumber.value = ""
}
}

function calc(txtNumber)
{
if (txtNumber.value == "")
{
window.alert("You must enter a value");
}
else
{
if(operator == "ADD")
{
txtNumber.value = lastNum + parseFloat(txtNumber.value);
operator = "";
}
else if(operator == "SUBTRACT")
{
txtNumber.value = lastNum - parseFloat(txtNumber.value);
operator = "";
}
else if(operator == "MULTIPLY")
{
txtNumber.value = lastNum * parseFloat(txtNumber.value);
operator = "";
}
else if(operator == "DIVIDE")
{
txtNumber.value = lastNum / parseFloat(txtNumber.value);
operator = "";
}
else
{
window.alert("You must choose a new operation to perform.");
}
}
}