Event Handlers Return to the mt_calc. js file in your editor. Directly below the initial comment section, insert a command that runs the init() function when the page is loaded by the browser.
Create the init() function, which sets up the event handlers for the page. Within the init()function, add the following commands:
Declare the calcButtons variable containing the collection of page elements belonging to the calcButton class.
Loop through the calcButtons object collection and, for each button in that collection, run the buttonClick() function in response to the click event.
After the for loop, add a command that runs the calcKeys() function in response to the keydown event occurring within the element with the ID "calcWindow".
JavaScript Functions
Create the buttonClick() function. The purpose of this function is to change what appears in the calculator window when the user clicks the calculator buttons. Add the following commands to the function:
Declare the calcValue variable equal to the value attribute of the calcWindow text area box.
Declare the calcDecimal variable equal to the value attribute of the decimals input box.
Each calculator button has a valueattribute that defines what should be done with that button. Declare the buttonValueattribute equal to the value attribute of the event object target.
Create a switch-case structure for the following possible values of the buttonValue variable:
For "del", delete the contents of the calculate window by changing calcValue to an empty text string.
For "bksp", erase the last character in the calculator window by changing calcValue to the value returned by the eraseChar() function using calcValueas the parameter value.
For "enter", calculate the value of the current expression by changing calcValue to: " = " + evalEq(calcValue, calcDecimal) + "\n"Note that \n is used to add a line return at the end of the answer.
For "prev", copy the last equation in the calculator window by changing calcValue to the value returned by the lastEq() function using calcValue as the parameter value.
Otherwise, append the calculator button character to the calculator window by letting, calcValue equal calcValueplus buttonValue.
After the switch-case structure, set the value attribute of the calcWindow text area box to calcValue.
Run the command document. getElementById("calcWindow").focus( )to put the cursor focus within the calculator window.
Next, you will control the keyboard actions within the calculator window. Theresa wants you to program the actions that will happen when the user presses the Delete, Enter, and up-arrow keys. Add the calcKeys() function containing the following commands:
As you did in the buttonClick() function, declare the calcValue and calcDecimalvariables.
Create a switch-case structure for different values of the key attribute of the event object as follows:
For "Delete", erase the contents of the calculator window by changing calcValue to an empty text string.
For "Enter", add the following expression to calcValue:
" = " + evalEq(calcValue, calcDecimal)
For "ArrowUp", add the following expression to calcValue
lastEq(calcWindow. value)
And then enter a command that prevents the browser from performing the default action in response to the user pressing the up-arrow key.
After the switch-case structure, set the value attribute of the calcWindow text area box to calcValue.
Here's the code:
"use strict";
/*
New Perspectives on HTML5, CSS3 and JavaScript 6th Edition
Tutorial 11
Case Problem
Author: DD
Date: 04/18/19
Filename: mt_calc. js
Functions List:
init()
Initializes the contents of the web page and sets up the
event handlers
buttonClick(e)
Adds functions to the buttons clicked within the calcutlor
calcKeys(e)
Adds functions to key pressed within the calculator window
eraseChar(textStr)
Erases the last character from the text string, textStr
evalEq(textStr, decimals)
Evaluates the equation in textStr, returning a value to the number of decimals specified by the decimals parameter
lastEq(textStr)
Returns the previous expression from the list of expressions in the textStr parameter
*/
window. onload = init;
function init() {
var calButtons =
}
function buttonClick(e) {
}
function calcKeys(e) {
}
/* */
function eraseChar(textStr) {
return textStr. substr(0, textStr. length - 1);
}
function evalEq(textStr, decimals) {
var lines = textStr. split(/\r?\n/);
var lastLine = lines[lines. length-1];
var eqValue = eval(lastLine);
return eqValue. toFixed(decimals);
}
function lastEq(textStr) {
var lines = textStr. split(/\r?\n/);
var lastExp = lines[lines. length-2];
return lastExp. substr(0, lastExp. indexOf("=")).trim();
}