2. At the start of the JavaScript file, youll see the declarations for two arrays: one for names and one for scores, and each array contains four elements. Youll also see the code for the $ function as well as an onload event handler that attaches three functions named addScore(), displayResults(), and displayScores() to the click events of the buttons.

3. Write the displayResults function(). It should derive the average score and the highest score from the arrays and then display the results in the div element with results as its id, as shown above. To display the results, you need to add nodes to the DOM with the heading as an h2 element and the average and highest scores as

elements. The easiest way to do that is to use the innerHTML property as shown in figure 6-13.

4. Write the displayScores() function. It should get the names and scores from the arrays and display them as rows in the HTML table element with scores_table as its id, as shown above.

5. Write the addScore() function. It should add a name and score to the two arrays. To test whether this works, you can click the Display Scores button and see if the new name and score have been added to the table.

6. If you havent already done it, add data validation to addScore() function. The Name entry must not be empty and the Score entry must be a positive number from 0 through 100. If either entry is invalid, use the alert() method to display this error message: You must enter a name and a valid score.

7. Make sure that your application moves the cursor to the Name field when the application starts and after a name and score have been added to the array.

HTML          
 
Use a Test Score array
 Name:  Score:       
  
   

test_scores.js var names = ["Ben", "Joel", "Judy", "Anne"]; var scores = [88, 98, 77, 88]; var $ = function (id) { return document.getElementById(id); }; window.onload = function () { $("add").onclick = addScore; $("display_results").onclick = displayResults; $("display_scores").onclick = displayScores; }; CSS

body { font-family: Arial, Helvetica, sans-serif; background-color: white; margin: 0 auto; padding: 10px 20px; width: 600px; border: 3px solid blue; } h1 { color: blue; margin-top: 0; margin-bottom: .5em; } h2 { color: blue; font-size: 120%; padding: 0; margin-bottom: .5em; } main { padding: 1em 2em; } label { float: left; width: 3em; text-align: right; } input { margin-left: 1em; margin-bottom: .5em; } p { margin: 0; } td { width: 10em; }