Learning Outcomes
On completion of this section you will know how to use to make a web page more interactive by:
- Using checkboxes and radio buttons
- Making page more interacting by enabling/disabling objects
- Using events other than the click event
Objects and Events
Introduction
In the previous section we looked at creating a simple payroll by reading data out of three input boxes and using this data to calculate the gross, tax, superannuation contribution and net.
For calculating the superannuation we used a very roundabout and awkward method, i.e. supplying a superannuation code, from which the programme itself would work on the superannuation rate. This was a good way of illustrating the use of the switch construct, but as far as making the user’s job easier it fell very short of the ideal.
We shall use the payroll again for this lesson but, other than the hours and rate, all other data will be supplied by the user by clicking on either checkboxes or radio buttons.
An illustration of the completed user interface is shown below.
Notice that there is no button here to click on. This is because calculation occurs automatically after user inputting data. The data entries that would trigger calculation would be:
- Changing the value of hours worked
- Changing the value of hourly rate
- Clicking the Union button on or off
- Clicking on any of the radio buttons down the left hand side
Any of the above activities that cause the automatic calculation of the payroll to occur is referred to as an event. to do some processing as a result of an event occurring is knows as event handling.
Go to topThe HTML File
We are introducing a new concept into the HTML code below: event handling. The rest of the code should be familiar to you, so we shall concentrate on the event handlers.
<!DOCTYPE html>
<html lang="en">
<head>
<link href="InstructionsCSS.css" rel="stylesheet" type="text/css">
<meta charset="UTF-8">
<link href="Forms.css" rel="stylesheet" type="text/css">
<script src="Objects%20Payroll.js" type="text/javascript"></script>
</head>
<body>
<main>
<form style="height: 480px">
<article style="width: 270px;float: left">
<p>
<label for="Hours">Hours Worked</label>
<input type="number" max="60" min="10" id="Hours" name="Hours" required onchange="calculatePay()">
</p>
<p>
<label for="Rate">Hourly Rate</label>
<input type="number" max="80" min="20" id="Rate" name="Rate" required onchange="calculatePay() ">
</p>
<p>
<label for="Gross">Gross Pay</label>
<input type="text" id="Gross" name="Gross" disabled>
</p>
<p>
<label for="UnionFees">Union Fees</label>
<input type="text" id="UnionFees" name="UnionFees" disabled>
</p>
<p>
<label for="Superannuation">Super</label>
<input type="text" id="Superannuation" name="Superannuation" disabled>
</p>
<p>
<label for="Tax">Tax</label>
<input type="text" id="Tax" name="Tax" disabled>
</p>
<p>
<label for="Net">Net Pay</label>
<input type="text" id="Net" name="Net" disabled>
</p>
</article>
<article style="float: right;width: 100px;">
<p>
<label for="Union">Union</label>
<input type="checkbox" id="Union" name="Union" onchange="calculatePay()">
</p>
<p>
<label for="Super">Super</label>
<input type="checkbox" id="Super" name="Super" onchange="enableRadio()">
</p>
<p>
<label for="fivep"><span id="fiveSpan">5%</span></label>
<input type="radio" id="fivep" name="fivep" onchange="calculatePay()">
</p>
<p>
<label for="tenp"><span id="tenSpan">10%</span></label>
<input type="radio" id="tenp" name="fivep" onchange="calculatePay()">
</p>
<p>
<label for="fifteenp"><span id="fifteenSpan">15%</span></label>
<input type="radio" id="fifteenp" name="fivep" onchange="calculatePay()">
</p>
<p>
<label for="twentyp"><span id="twentySpan">20%</span></label>
<input type="radio" id="twentyp" name="fivep" onchange="calculatePay()">
</p>
</article>
</form>
</main>
</body>
</html>
The first two event handlers occur at lines 15 and 19. For clarity we shall reproduce line 15 here.
<input type="number" max="60" min="10" id="Hours" name="Hours" required onchange="calculatePay()">
Most of the above code should be familiar to you apart from the final part: 'onchange="calculatePay()"'
Change normally means something new happening. If the case of an input field that accepts user input, a change would mean changing the contents of the input.This would include adding data to it the first time or else modifying existing data. Either way when the user finishes entering data and leaves that input element, a change event occurs. Our html code will respond to that change by calling the function calculatePay(). This function is in our JavaScript file which we shall look at shortly. It simply calculates the pay from scratch based on what change was made to the value of hours worked.
What we have said about line 15 also applies to line 19, and so there is no need to discuss it.
The next event handler is at line 45. Here we handle the checkbox for union membership. Handling union membership is very simple in this case. A person is either a union member or they are not. If they are we deduct $10 from their pay as union contribution or else we don't. Whenever we switch membership on or off we have to recalculate the pay for the new membership state.
At line 49 we meet a slightly different use of the event handler. In this case we are dealing with superannuation contributions. Again this applies only to those who are signed up for superannuation payments. Thus one is a contributor or one is not. Clicking a checkbox on or off is all we need for this. However if the checkbox is on then there are four different ways of calculating the superannuation payments: 5%, 10%, 15% or 20%. This is facilitated by four different radio buttons, which are aligned down the right side of the form. The purpose of the function changeRadio() is to turn those radio buttons on or off.
Go to topThe JavaScript File
All of our JavaScript code is contained within one file. However it contains only two functions. Therefore for readability's sake the the file was broken into two listings: Listing 2 and Listing 2-1.
The listing below contains the function calculatePay().
const calculatePay = () => {
const sngHours = parseFloat(document.getElementById("Hours").value);
const curRate = parseFloat(document.getElementById("Rate").value);
const unionMember = document.getElementById("Union").checked;
const superMember = document.getElementById("Super").checked;
const curGross = sngHours * curRate;
let curTax;
let unionFees;
let superPayments = 0;
if (curGross < 500) {
curTax = curGross * 0.25;
} else {
curTax = 125 + (curGross - 500) * 0.33;
}
unionFees = unionMember ? 10 : 0;
if (superMember) {
if (document.getElementById("fivep").checked) {
superPayments = curGross * 0.05;
} else if (document.getElementById("tenp").checked) {
superPayments = curGross * 0.1;
} else if (document.getElementById("fifteenp").checked) {
superPayments = curGross * 0.15;
} else if (document.getElementById("twentyp").checked) {
superPayments = curGross * 0.2;
}
}
const curNet = curGross - curTax - unionFees - superPayments;
document.getElementById("Gross").value = curGross.toFixed(2);
document.getElementById("Tax").value = curTax.toFixed(2);
document.getElementById("UnionFees").value = unionFees.toFixed(2);
document.getElementById("Superannuation").value = superPayments.toFixed(2);
document.getElementById("Net").value = curNet.toFixed(2);
};
Our file can be very easily broken up into its component sections: input, process and output.
Lines 2 - 5 comprise the input section. Line 2 reads the value of the hours from the input field Hours while parseFloat converts it to a floating point number. Line 3 reads the value of the rate in the same way.
Line 4 reads the boolean value unionMember. If the Union checkbox is ticked then a value of True is returned, otherwise a value of False is returned. The value of superMemberis read in the same way.
Lines 6 - 27 the process section.
At line 6 the value of the Gross is calculated by multiplying by multiplying the hours by the rate.
At lines 7 - 9 the variables curTax, unionFees and superPayments are defined.
At lines 10 - 14 the tax is calculated. If the gross is less than $500 then the tax is 25% of the gross. If the gross is $500 or more then the tax is $125 plus 33% of the gross over $500.
Line 10 which is shown below is somewhat cryptic:unionFees = unionMember ? 10 : 0;
It is a shorthand way of writing an if..else construct. If unionMember is True then unionFees is set to 10, otherwise it is set to 0.
Lines 15 - 26 calculate the superannuation payments. If the person is a superannuation contributor then the superannuation payments are calculated based on the rate selected by the user. The rate is selected by clicking on one of the four radio buttons. The rate is 5%, 10%, 15% or 20% of the gross.
Line 27 calculates the net pay by subtracting the tax, union fees and superannuation contributions from the gross.
Lines 28 - 32 are the output section. The values of curGross, curTax, unionFees, superPayments and curNet are written to the appropriate input fields.
const enableRadio = () => {
const isSuperMember = document.getElementById("Super").checked;
const styleType = isSuperMember ? "color:black" : "color:gray";
const radioButtons = ["fivep", "tenp", "fifteenp", "twentyp"];
const spans = ["fiveSpan", "tenSpan", "fifteenSpan", "twentySpan"];
radioButtons.forEach(id => {
document.getElementById(id).disabled = !isSuperMember;
});
spans.forEach(id => {
document.getElementById(id).style.color = styleType;
});
calculatePay();
};
}
The function enableRadio() is a slight misnomer: it can enable radio buttons that have been disabled but it also can disable the same radio buttons that had been previously enabled. The name toggleRadio() would have been a more appropriate title.
Line 36 reads the value of the Super checkbox. If the checkbox is ticked then the value of isSuperMember is True, otherwise it is False.
Line 37 sets the value of styleType to either "color:black" or "color:gray". If the person is a superannuation contributor then the radio buttons are black, otherwise they are gray.
Lines 38 - 39 define two arrays: radioButtons and spans. The first array contains the ids of the radio buttons while the second array contains the ids of the spans that contain the text of the radio buttons.
Lines 40 - 45 use the forEach method to iterate through the radio buttons and spans. If the person is a superannuation contributor then the radio buttons are enabled and the text is black, otherwise the radio buttons are disabled and the text is gray.
Line 42 calls the function calculatePay() to recalculate the pay based on the new superannuation status.
Go to topLive Form
Experiment with this form by entering various combinations of values for hours worked, hourly rate, union membership and different superannuation rates.
Go to topSummary
The website introduces key concepts related to JavaScript, focusing on objects and events to enhance web page interactivity. It begins with an overview of learning outcomes, emphasizing the use of checkboxes, radio buttons, and event handling to enable or disable form objects dynamically. The content highlights the importance of making web pages more interactive through event-driven programming techniques.
The introduction revisits a payroll application previously discussed, now improved with interactive elements like checkboxes and radio buttons. These elements enable users to input data and trigger calculations automatically without the need for a button. The description outlines how changes to form inputs, such as hours worked or hourly rate, or toggling membership options like union or superannuation, initiate automatic updates to the payroll calculations. This introduces the concept of event handling as a core mechanism for responsive web forms.
The HTML section explains the structure of the web form, focusing on event handlers integrated into input elements. It provides examples of how changes to input values invoke specific JavaScript functions, such as calculating pay or enabling radio buttons. The narrative clarifies how event handlers are coded and how they respond to user interactions, including toggling membership or selecting superannuation contribution rates. The use of concise and efficient coding techniques, like ternary operators, is demonstrated to streamline the process.
The JavaScript section details two main functions: calculatePay() and enableRadio(). These functions handle input, processing, and output tasks within the payroll application. The calculatePay() function processes user inputs, calculates gross pay, taxes, union fees, and superannuation contributions, and updates the output fields dynamically. The enableRadio() function toggles the availability of radio buttons based on the user's superannuation membership status, ensuring the form responds appropriately to user actions. The code is structured into input, processing, and output sections for clarity.
The site concludes with a live demonstration of the payroll form, allowing users to experiment with various input values and observe the real-time calculations triggered by their interactions. This practical component reinforces the theoretical aspects of event-driven programming and provides a hands-on experience to solidify the concepts discussed. The content overall serves as a comprehensive guide to using JavaScript for creating interactive and user-friendly web forms.
Go to topRevision
Multi choice
- What is the primary focus of the website content?
- Creating visual effects with JavaScript
- Understanding event-driven programming
- Designing complex databases
- Learning advanced CSS animations
- Which user interaction triggers payroll calculations on the form?
- Clicking a submit button
- Changing the value of an input field
- Hovering over the form
- Closing the browser tab
- What is the purpose of the
onchangeattribute in the HTML form?- To style the elements dynamically
- To call a JavaScript function when input changes
- To display error messages
- To link the form to a database
- What does the
enableRadio()function do in the JavaScript code?- Enables or disables radio buttons based on conditions
- Highlights selected checkboxes
- Calculates the gross pay
- Changes the text color of labels
- How is gross pay calculated in the JavaScript function?
- By adding hours worked to hourly rate
- By multiplying hours worked by hourly rate
- By dividing hours worked by hourly rate
- By subtracting hours worked from hourly rate
- Which HTML element is used to collect numeric input in the form?
<input type="text"><input type="number"><input type="checkbox"><input type="radio">
- What happens when the "Union" checkbox is toggled?
- The form resets to default values
- The union fees are recalculated
- The hourly rate is increased
- The radio buttons are enabled
- Which of these is an example of an event in the web form?
- Styling the form with CSS
- Typing text into an input box
- Creating a new HTML page
- Saving changes to a database
- What is the function of the
parseFloat()method in the code?- To format text as bold
- To convert input values to floating-point numbers
- To check if an input is empty
- To reset all form fields
- How is tax calculated for gross pay less than $500?
- By adding 25% to the gross pay
- By taking 25% of the gross pay
- By subtracting $125 from the gross pay
- By dividing gross pay by 25
Fill in the gaps
- The website focuses on enhancing web page interactivity using __________ and events.
- An event that occurs when the value of an input field changes is handled using the __________ attribute in HTML.
- The function __________ is used to calculate gross pay, tax, and other deductions in the payroll application.
- The __________ function toggles the availability of radio buttons based on superannuation membership.
- Gross pay is calculated by multiplying the __________ worked by the hourly rate.
- Checkboxes and radio buttons are examples of interactive elements used in __________-driven programming.
- The __________ method in JavaScript converts input values into floating-point numbers.
- When the "Union" checkbox is ticked, a union fee of __________ is deducted from the gross pay.
- Tax for gross pay of $500 or more is calculated as $125 plus __________% of the gross pay exceeding $500.
- The HTML form uses the __________ input type to collect numeric values such as hours worked and hourly rate.
Assignment
Part 1
Assignment: JavaScript Objects and Events
Complete the following assignment to demonstrate your understanding of the concepts covered in the provided material. This assignment focuses on objects, event handling, and interactive form design using HTML and JavaScript.
Instructions
- Read all the questions carefully.
- Provide answers in a separate document or form as directed by your instructor.
- Include explanations for your answers where necessary.
- Submit the assignment by the specified deadline.
Part 1: Short Answer Questions
- Explain the purpose of event handling in a web form. Provide examples of events discussed in the material.
- Describe the functionality of the
calculatePay() function. What inputs does it process, and what outputs does it generate?
- What role does the
enableRadio() function play in the payroll application?
- Discuss how the HTML form uses the
onchange attribute to trigger JavaScript functions. Provide examples from the material.
- How does the JavaScript code calculate net pay? Include the factors considered in the calculation.
Part 2: Practical Exercises
- Create a simple HTML form that includes input fields for hours worked, hourly rate, and a checkbox for union membership. Add JavaScript to calculate and display gross pay dynamically.
- Enhance your form from the previous question by adding radio buttons for selecting superannuation rates (5%, 10%, 15%, and 20%). Write a JavaScript function to enable or disable these radio buttons based on a checkbox for superannuation membership.
- Simulate the payroll application from the material. Ensure that the form calculates gross pay, tax, union fees, superannuation contributions, and net pay automatically based on user inputs.
- Implement an event listener for one of the input fields in your form. Describe how this listener improves the interactivity of your web page.
Part 3: Fill-in-the-Blanks
- Explain the purpose of event handling in a web form. Provide examples of events discussed in the material.
- Describe the functionality of the
calculatePay()function. What inputs does it process, and what outputs does it generate? - What role does the
enableRadio()function play in the payroll application? - Discuss how the HTML form uses the
onchangeattribute to trigger JavaScript functions. Provide examples from the material. - How does the JavaScript code calculate net pay? Include the factors considered in the calculation.
Part 2: Practical Exercises
- Create a simple HTML form that includes input fields for hours worked, hourly rate, and a checkbox for union membership. Add JavaScript to calculate and display gross pay dynamically.
- Enhance your form from the previous question by adding radio buttons for selecting superannuation rates (5%, 10%, 15%, and 20%). Write a JavaScript function to enable or disable these radio buttons based on a checkbox for superannuation membership.
- Simulate the payroll application from the material. Ensure that the form calculates gross pay, tax, union fees, superannuation contributions, and net pay automatically based on user inputs.
- Implement an event listener for one of the input fields in your form. Describe how this listener improves the interactivity of your web page.
Part 3: Fill-in-the-Blanks
Complete the following statements based on the material provided:
- The website demonstrates the use of __________ and events to make web pages interactive.
- The
onchangeattribute is used to trigger __________ in response to user input. - The function
calculatePay()calculates __________, tax, and other deductions. - The gross pay is determined by multiplying __________ by the hourly rate.
- The __________ method converts string input into floating-point numbers.
Submission
Submit your completed assignment as instructed by your teacher. Include all required code, explanations, and responses to the questions.
Part 2
For this assignment, you are required to create a web form that calculates the total cost of a meal at a restaurant. The form should include the following elements:
- Input fields for entering the cost of the main course, dessert, and drinks.
- Checkboxes for selecting additional items like appetizers, sides, and desserts.
- Radio buttons for choosing the tip percentage (10%, 15%, 20%, or custom).
- Output fields for displaying the subtotal, tax, tip amount, and total cost of the meal.
The form should automatically update the total cost based on user input, including changes to the main course, dessert, drinks, and additional items. The tip amount should be calculated based on the selected tip percentage or custom amount entered by the user. The tax rate can be fixed at 10% of the subtotal.
Use event handlers to trigger calculations when input values change or when checkboxes/radio buttons are selected. Ensure that the form provides real-time feedback to the user and updates the output fields dynamically. You can customize the styling of the form using CSS to enhance the user experience.
Submit your completed assignment as a zip file containing the HTML, CSS, and JavaScript files. Include a brief description of your form design and any additional features you implemented to improve interactivity.
Go to top