Please fix the following Javascript Web Calculator: The calculator supports +, -
ID: 3572754 • Letter: P
Question
Please fix the following Javascript Web Calculator:
The calculator supports +, -, * and / with multiple operators. It works great if you dont click two operations buttons in a row, however, when clicking the 'operations' buttons in a row it has weird outputs like the following errors: The problem is only when clicking the operations buttons in a row or in conbinations between them.
HTML CODE: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<!--Type of document-->
<!DOCTYPE html>
<html>
<!--Head of HTML document-->
<head>
<style>
</style>
<!--Link Javascript File-->
<script type="text/javascript" src="Calculator.js"></script>
</head>
<!--Body-->
<body><center>
<form class="Display" name="calculator_Display">
<input type="text" class="Calculator_Disp" id="print" />
<!--First row of buttons - - - - - - - - - - - - - - - - - - - -->
<div>
<!--Button CE -->
<input type="button" class="button2"
value="CE" />
<!--Button C (up)-->
<input type="button" class="button2"
value=" C " />
<!--Button Del -->
<input type="button" class="button2"
value="Del" />
<!--Button / -->
<input type="button" class="button3"
value=" / " /></div>
<!--Second row of buttons - - - - - - - - - - - - - - - - - - - -->
<div>
<!--Button 7 -->
<input type="button" class="button"
value=" 7 " />
<!--Button 8 -->
<input type="button" class="button"
value=" 8 " />
<!--Button 9 -->
<input type="button" class="button"
value=" 9 " />
<!--Button x -->
<input type="button" class="button3"
value=" x " /></div>
<!--Third row of buttons - - - - - - - - - - - - - - - - - - - - - -->
<div>
<!--Button 4 -->
<input type="button" class="button"
value=" 4 " />
<!--Button 5 -->
<input type="button" class="button"
value=" 5 " />
<!--Button 6 -->
<input type="button" class="button"
value=" 6 " />
<!--Button - -->
<input type="button" class="button3"
value=" - " /></div>
<!--Fourth row of buttons - - - - - - - - - - - - - - - - - - - - - -->
<div>
<!--Button 1 -->
<input type="button" class="button"
value=" 1 " />
<!--Button 2 -->
<input type="button" class="button"
value=" 2 " />
<!--Button 3 -->
<input type="button" class="button"
value=" 3 " />
<!--Button + -->
<input type="button" class="button3"
value=" + " /></div>
<!--Fifth row of buttons-->
<div>
<!--Button CE -->
<input type="button" class="button4"
value=" C " />
<!--Button 0 -->
<input type="button" class="button"
value=" 0 " />
<!--Button . -->
<input type="button" class="button4"
value=" . " />
<!--Button = -->
<input type="button" class="button5"
value=" = " /></div>
</form>
</center>
</body>
</html>
JAVASCRIPT file : - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
//Function for Displaying numbers being input
function Input_proccessing(digit) {
var print = document.getElementById('print');
Cl_Pr_Result();
// Clears 0 if it's the only digit in there.
if (print.value === '0') print.value = '';
print.value += digit;
}
//Function for Decimals numbers
function decimal_insertion() {
var print = document.getElementById('print');
Cl_Pr_Result();
if (print.value.indexOf('.') === -1)
print.value += '.';
}
//Functions for operations
//Function for =
ops = {none: function(left, right) { return right; },
// Functions for Math Operations
add: function(left, right) { return left + right; },
subtract: function(left, right) { return left - right; },
multiply: function(left, right) { return left * right; },
divide: function (left, right) { return left / right;}
};
//Function for setting the command of the operation
function Operation_Command(command) {
var print = document.getElementById('print');
Proccess_Calculation();
stored_Number = print.value;
if (ops.hasOwnProperty(command))
op = ops[command];
}
//Function for calculation
function Proccess_Calculation() {
var print = document.getElementById('print');
print.value = op(+stored_Number, +print.value);
calculation_Finished = true;
op = ops.none;
}
//Function for Clearing the display
function Clear_the_Display() {
var print = document.getElementById('print');
print.value = '0';
stored_Number = '0';
calculation_Finished = true;
op = ops.none;
}
//Function for Clearing Previous Result
function Cl_Pr_Result() {
var print = document.getElementById('print');
if (calculation_Finished) {
print.value = '0';
calculation_Finished = false;
}}
//Event Handling
if ('addEventListener' in window)
window.addEventListener('load', Clear_the_Display);
else
window.attachEvent('onload', Clear_the_Display);
Explanation / Answer
In any normal calculator,these things happen when you click a button:
1.When a digit is clicked :
It clears the previous display and displays the clicked digit.
2.When a symbol(operand) is clicked:
It clears the previous display and displays the clicked symbol.
But in this code the first case is taken care but not the second one.
Whenever an operand(symbol) is clicked the previously clicked digit is stored and need not be in the display,if that is still present in the display it will be stored again,hence whenever an operand is clicked the previous display should also be cleared and the operand should be displayed,code for the same is as follows(Change in Operation_Command function)(Note:Please refer TODO section):
function Operation_Command(command,sign) {
var print = document.getElementById('print');
Proccess_Calculation();
stored_Number = print.value;
/**TODO**/
print.value=sign;
if (ops.hasOwnProperty(command))
op = ops[command];
}
For the above function to work there should be a new parameter(operand or symbol) to be passed while calling Operation_Command function,so change in the html code while calling Operation_Command function is as follows:
<input type="button" class="button3"
value=" / " />
If the above changes are taken care,then the mentioned errors doesnt occur.The complete working code is as follows:
<!--Type of document-->
<!DOCTYPE html>
<html>
<!--Head of HTML document-->
<head>
<style>
</style>
<!--Link Javascript File-->
<script type="text/javascript" ">//Function for Displaying numbers being input
function Input_proccessing(digit) {
var print = document.getElementById('print');
Cl_Pr_Result();
// Clears 0 if it's the only digit in there.
if (print.value === '0') print.value = '';
print.value += digit;
}
//Function for Decimals numbers
function decimal_insertion() {
var print = document.getElementById('print');
Cl_Pr_Result();
if (print.value.indexOf('.') === -1)
print.value += '.';
}
//Functions for operations
//Function for =
ops = {none: function(left, right) { return right; },
// Functions for Math Operations
add: function(left, right) { return left + right; },
subtract: function(left, right) { return left - right; },
multiply: function(left, right) { return left * right; },
divide: function (left, right) { return left / right;}
};
//Function for setting the command of the operation
/**TODO**/
function Operation_Command(command,sign) {
var print = document.getElementById('print');
Proccess_Calculation();
stored_Number = print.value;
/**TODO**/
print.value=sign;
if (ops.hasOwnProperty(command))
op = ops[command];
}
//Function for calculation
function Proccess_Calculation() {
var print = document.getElementById('print');
print.value = op(+stored_Number, +print.value);
calculation_Finished = true;
op = ops.none;
}
//Function for Clearing the display
function Clear_the_Display() {
var print = document.getElementById('print');
print.value = '0';
stored_Number = '0';
calculation_Finished = true;
op = ops.none;
}
//Function for Clearing Previous Result
function Cl_Pr_Result() {
var print = document.getElementById('print');
if (calculation_Finished) {
print.value = '0';
calculation_Finished = false;
}}
//Event Handling
if ('addEventListener' in window)
window.addEventListener('load', Clear_the_Display);
else
window.attachEvent('onload', Clear_the_Display);</script>
</head>
<!--Body-->
<body><center>
<form class="Display" name="calculator_Display">
<input type="text" class="Calculator_Disp" id="print" />
<!--First row of buttons - - - - - - - - - - - - - - - - - - - -->
<div>
<!--Button CE -->
<input type="button" class="button2"
value="CE" />
<!--Button C (up)-->
<input type="button" class="button2"
value=" C " />
<!--Button Del -->
<input type="button" class="button2"
value="Del" />
<!--Button / -->
<input type="button" class="button3"
value=" / " /></div>
<!--Second row of buttons - - - - - - - - - - - - - - - - - - - -->
<div>
<!--Button 7 -->
<input type="button" class="button"
value=" 7 " />
<!--Button 8 -->
<input type="button" class="button"
value=" 8 " />
<!--Button 9 -->
<input type="button" class="button"
value=" 9 " />
<!--Button x -->
<input type="button" class="button3"
value=" x " /></div>
<!--Third row of buttons - - - - - - - - - - - - - - - - - - - - - -->
<div>
<!--Button 4 -->
<input type="button" class="button"
value=" 4 " />
<!--Button 5 -->
<input type="button" class="button"
value=" 5 " />
<!--Button 6 -->
<input type="button" class="button"
value=" 6 " />
<!--Button - -->
<input type="button" class="button3"
value=" - " /></div>
<!--Fourth row of buttons - - - - - - - - - - - - - - - - - - - - - -->
<div>
<!--Button 1 -->
<input type="button" class="button"
value=" 1 " />
<!--Button 2 -->
<input type="button" class="button"
value=" 2 " />
<!--Button 3 -->
<input type="button" class="button"
value=" 3 " />
<!--Button + -->
<input type="button" class="button3"
value=" + " /></div>
<!--Fifth row of buttons-->
<div>
<!--Button CE -->
<input type="button" class="button4"
value=" C " />
<!--Button 0 -->
<input type="button" class="button"
value=" 0 " />
<!--Button . -->
<input type="button" class="button4"
value=" . " />
<!--Button = -->
<input type="button" class="button5"
value=" = " /></div>
</form>
</center>
</body>
</html>