I'm not really sure if what console.log() shows on google-chrome is the correct solution
here is the javascript code, name it solution.js :
//need a global array of Employees outside of the function
var Employees = [];
function process() {
'use strict';
// Get form references:
var firstName = document.getElementById('firstName').value;
var lastName = document.getElementById('lastName').value;
var department = document.getElementById('department').value;
// Reference to where the output goes:
var output = document.getElementById('output');
var empnum = document.getElementById('empnum');
// Create a employee object:
var employee = {
firstName : firstName,
lastName : lastName,
department: department,
hireDate : new Date()
};
// Add the employee object to the Employees array:
Employees.push(employee);
console.log('these are the employee objects:'); // look on chrome console
console.log(Employees); // chrome console Employees Objects
// Create the ouptut as HTML:
var message = '<h2>Employee Added</h2>Name: ' + employee.lastName + ', ' + employee.firstName + '<br>';
message += 'Department: ' + employee.department + '<br>';
message += 'Hire Date: ' + employee.hireDate.toDateString();
// Display the employee object:
output.innerHTML = message;
// display the employee count:
empnum.innerHTML = 'You have ' + Employees.length + ' Employees';
return false;
}
// Initial setup:
function init() {
'use strict';
document.getElementById('theForm').onsubmit = process;
}
window.onload = init;
Here is the HTML :
<!doctype html>
<html lang="en">
<head>
<!-- combine the techniques demonstrated in tasks.js and employee.js so that an array of employee objects is created. -->
<meta charset="utf-8">
<title>Employee Form</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="css/form.css">
</head>
<body>
<form action="#" method="post" id="theForm">
<fieldset><legend>Add an Employee</legend>
<div><label for="firstName">First Name</label><input type="text" name="firstName" id="firstName" required></div>
<div><label for="lastName">Last Name</label><input type="text" name="lastName" id="lastName" required></div>
<div><label for="department">Department</label><select name="department" id="department">
<option value="Accounting">Accounting</option>
<option value="Administration">Administration</option>
<option value="Human Resources">Human Resources</option>
<option value="Marketing">Marketing</option>
</select></div>
<input type="submit" value="Submit" id="submit">
</fieldset>
<div id="output"></div>
<div id="empnum"></div>
</form>
<script src="js/solution.js"></script>
</body>
</html>
Chapter 6 Review And Pursue
in Modern Javascript: Develop and Design
Posted
This is my solution to the last question in CH6 review and Pursue: If you’re feeling particularly confident, combine the techniques demonstrated in tasks.js and employee.js so that an array of employee objects is created.
I'm not really sure if what console.log() shows on google-chrome is the correct solution
here is the javascript code, name it solution.js :
//need a global array of Employees outside of the function var Employees = []; function process() { 'use strict'; // Get form references: var firstName = document.getElementById('firstName').value; var lastName = document.getElementById('lastName').value; var department = document.getElementById('department').value; // Reference to where the output goes: var output = document.getElementById('output'); var empnum = document.getElementById('empnum'); // Create a employee object: var employee = { firstName : firstName, lastName : lastName, department: department, hireDate : new Date() }; // Add the employee object to the Employees array: Employees.push(employee); console.log('these are the employee objects:'); // look on chrome console console.log(Employees); // chrome console Employees Objects // Create the ouptut as HTML: var message = '<h2>Employee Added</h2>Name: ' + employee.lastName + ', ' + employee.firstName + '<br>'; message += 'Department: ' + employee.department + '<br>'; message += 'Hire Date: ' + employee.hireDate.toDateString(); // Display the employee object: output.innerHTML = message; // display the employee count: empnum.innerHTML = 'You have ' + Employees.length + ' Employees'; return false; } // Initial setup: function init() { 'use strict'; document.getElementById('theForm').onsubmit = process; } window.onload = init;Here is the HTML :
<!doctype html> <html lang="en"> <head> <!-- combine the techniques demonstrated in tasks.js and employee.js so that an array of employee objects is created. --> <meta charset="utf-8"> <title>Employee Form</title> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <link rel="stylesheet" href="css/form.css"> </head> <body> <form action="#" method="post" id="theForm"> <fieldset><legend>Add an Employee</legend> <div><label for="firstName">First Name</label><input type="text" name="firstName" id="firstName" required></div> <div><label for="lastName">Last Name</label><input type="text" name="lastName" id="lastName" required></div> <div><label for="department">Department</label><select name="department" id="department"> <option value="Accounting">Accounting</option> <option value="Administration">Administration</option> <option value="Human Resources">Human Resources</option> <option value="Marketing">Marketing</option> </select></div> <input type="submit" value="Submit" id="submit"> </fieldset> <div id="output"></div> <div id="empnum"></div> </form> <script src="js/solution.js"></script> </body> </html>