In this exercise, youll upgrade the code in the Email List application of chapter 4 so the span elements that display the error messages dont require id attributes.

1. Open the HTML and JavaScript files in this folder: exercises_short\ch05\email_list\ Then, run the application to see that the validation works.

2. In the HTML file, delete the id attributes for the span elements.

3. In the JavaScript file, use the properties of the Node interface to display the error messages without using the id attributes.

I am having trouble figuring out how to change the JavaScript file to show the error message.

HTML code:

Please join our email list

Email Address:

Re-enter Email Address:

First Name

css:

body { font-family: Arial, Helvetica, sans-serif; background-color: white; margin: 0 auto; padding: 0 2em 1em; width: 670px; border: 3px solid blue; } h1 { color: blue; } label { float: left; width: 11em; text-align: right; } input { margin-left: 1em; margin-right: 1em; margin-bottom: .5em; width: 11em; } span { color: red; }

Javascript:

"use strict"; var $ = function(id) { return document.getElementById(id); }; var joinList = function() { var emailAddress1 = $("email_address1").value; var emailAddress2 = $("email_address2").value; var firstName = $("first_name").value; var isValid = true;

// validate the first entry if (emailAddress1 === "") { $("email_address1_error").firstChild.nodeValue = "This field is required."; isValid = false; } else { $("email_address1_error").firstChild.nodeValue = ""; }

// validate the second entry if (emailAddress2 === "") { $("email_address2_error").firstChild.nodeValue = "This field is required."; isValid = false; } else if (emailAddress1 !== emailAddress2) { $("email_address2_error").firstChild.nodeValue = "This entry must equal first entry."; isValid = false; } else { $("email_address2_error").firstChild.nodeValue = ""; }

// validate the third entry if (firstName === "") { $("first_name_error").firstChild.nodeValue = "This field is required."; isValid = false; } else { $("first_name_error").firstChild.nodeValue = ""; }

// submit the form if all entries are valid if (isValid) { $("email_form").submit(); } };

window.onload = function() { $("join_list").onclick = joinList; $("email_address1").focus(); };