2. Look at the JavaScript code to see that it starts with the declarations for two arrays that contain four elements each. The first is an array of names. The second is an array of scores. Note too that the JavaScript code includes the $ function, an onload event handler, and the addScore() function for adding a name and score to the arrays.

3. Add an event handler for the Display Scores button that displays the names and scores in the arrays, as shown above. You will also need to use the onload event handler to attach this function to the click event of the Display Scores button. After you test this with the starting array values that are shown above, add a name and score to the arrays and test the display again.

4. Modify the event handler for the Add to Array button so the data in the text area is cleared after a name and score are added to the arrays.

         
 
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); }; var addScore = function () { // get user entries var name = $("name").value; var score = parseInt( $("score").value ); // check entries for validity if (name == "" || isNaN(score) || score < 0 || score > 100) { alert("You must enter a name and a valid score"); } else { names[names.length] = name; scores[scores.length] = score; $("name").value = ""; $("score").value = ""; } $("name").focus(); }; window.onload = function () { $("add").onclick = addScore; $("name").focus(); };