Code runs perfect and displays how it should. Now, I need to do the following an
ID: 3551508 • Letter: C
Question
Code runs perfect and displays how it should. Now, I need to do the following and cannot figure out how. Please help! I've done steps 1-6, and just need a little help!
7. Write an event handler for the click event of the Add to Array button that adds the user entries for name and score to the ends of the names and scores arrays and then clears the entries from the text boxes. When you test this addition, make sure that the Display Results button still works correctly.
8. If you havent already done it, add data validation to the event handler for the Add to Array button. 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.
Here is my JavaScript:
//Defined Arrays for Exercise
var names = ["Ben", "Joel", "Judy", "Anne"];
var scores = [88, 98, 77, 88];
//Return HTML Element object
var $ = function (id) {
return document.getElementById(id);
}
//Display Results Event Handler
var displayResults = function () {
//Calculate average of test scores
var sum = 0;
var average = 0;
//Loop through scores to sum all scores
for ( var score in scores ) {
//Sum all scores
sum += scores[score];
}
average = sum / scores.length;
//Calculate (find) High Score
var high = 0;
//Loop through the scores to find the high score
for ( var score in scores ) {
if ( scores[score] > high ) {
//Set high score
high = scores[score];
}
}
//Calculate (find) Low Score
var low = 100;
//Loop through the scores to find the low score
for ( var score in scores ) {
if ( scores[score] < low ) {
//Set low score
low = scores[score];
}
}
//Create a string to display the names and scores
var scoresString = "";
for ( var score in scores ) {
//Concatenate the name and respective score (one-to-one relationship)
scoresString += names[score] + ", " + scores[score] + " ";
}
//Update results HTML Textarea
$("results").innerHTML = "Average Score = " + average.toFixed(0) + " High Score = " + high.toFixed(0) + " Low Score = " + low.toFixed(0) + " " + scoresString ;
} //end displayResults()
window.onload = function () {
//Event Handler for Display Results button
$("display").onclick = displayResults;
} //end window.onload
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test Score Array</title>
<link rel="stylesheet" href="styles.css" />
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="test_scores.js"></script>
</head>
<body>
<section>
<h1>Use a Test Score array</h1>
<label for="name">Name:</label>
<input type="text" id="name"><br>
<label for="score">Score:</label>
<input type="text" id="score"><br>
<label> </label>
<input type="button" id="add" value="Add to Array" >
<input type="button" id="display" value="Display Results" ><br>
<h2>Results</h2>
<textarea id="results"> </textarea>
</section>
</body>
</html>
and CSS:
/* type selectors */
article, aside, figure, footer, header, nav, section {
display: block;
}
body {
font-family: Arial, Helvetica, sans-serif;
background-color: white;
margin: 0 auto;
padding: 10px 20px;
width: 550px;
border: 3px solid blue;
}
h1 {
color: blue;
margin-top: 0;
margin-bottom: .5em;
}
h2 {
color: blue;
font-size: 120%;
padding: 0;
margin-bottom: .5em;
}
section {
padding: 1em 2em;
}
label {
float: left;
width: 3em;
text-align: right;
}
input {
margin-left: 1em;
margin-bottom: .5em;
}
textarea {
width: 200px;
height: 150px;
}
Explanation / Answer
We can create an AddToArray button which adds the user enterd values to ends of scores and names arrays .
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test Score Array</title>
<link rel="stylesheet" href="styles.css" />
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="test_scores.js">
/Defined Arrays for Exercise
var names = ["Ben", "Joel", "Judy", "Anne"];
var scores = [88, 98, 77, 88];
//Return HTML Element object
var $ = function (id) {
return document.getElementById(id);
}
//Display Results Event Handler
var displayResults = function () {
//Calculate average of test scores
var sum = 0;
var average = 0;
//Loop through scores to sum all scores
for ( var score in scores ) {
//Sum all scores
sum += scores[score];
}
average = sum / scores.length;
//Calculate (find) High Score
var high = 0;
//Loop through the scores to find the high score
for ( var score in scores ) {
if ( scores[score] > high ) {
//Set high score
high = scores[score];
}
}
//Calculate (find) Low Score
var low = 100;
//Loop through the scores to find the low score
for ( var score in scores ) {
if ( scores[score] < low ) {
//Set low score
low = scores[score];
}
}
//Create a string to display the names and scores
var scoresString = "";
for ( var score in scores ) {
//Concatenate the name and respective score (one-to-one relationship)
scoresString += names[score] + ", " + scores[score] + " ";
}
//Update results HTML Textarea
$("results").innerHTML = "Average Score = " + average.toFixed(0) + " High Score = " + high.toFixed(0) + " Low Score = " + low.toFixed(0) + " " + scoresString ;
} //end displayResults()
//function for data validation
if(UName.value==' ')
alert("Enter a valid name");
return false;
else if (UScore.value<0)
alert ("Reenter value in range 0-100 only");
return false;
else
alert("You must enter a name and a valid score");
return true;
}
window.onload = function () {
//Event Handler for Display Results button
$("display").onclick = displayResults;
} //end window.onload
window.onload=add_element();
window.onload=validate();
</script>
</head>
<h1>Use a Test Score array</h1>
<label for="name">Name:</label>
<input type="text" id="name"><br>
<label for="score">Score:</label>
<input type="text" id="score"><br>
<label> </label>
<input type="button" id="add" value="Add to Array" >
<input type="button" id="display" value="Display Results" ><br>
<h2>Results</h2>
<textarea id="results"> </textarea>
<h2>UserNames</h2>
<textarea id="UName"> </textarea>
<h2>UserScores</h2>
<textarea id="UScore"> </textarea>
</section>
</body>