I am encountering issues with this assignment. JavaScript has proven itself to b

ID: 662524 • Letter: I

Question

I am encountering issues with this assignment. JavaScript has proven itself to be tougher for me than any other programming languages I have tackled so far. Below is a screen shot of the assignment summary. Below that I have included the original HTML, CSS, and JS file data; and below that I have included the script I have so far. My script is rendering nothing and I am completely stumped, and with the deadline for this assignment creeping up at midnight tonigh I have found myself stressed. Any help will be greatly appreciated... Thank you

Starting 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>

Starting 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;
}

Starting JS:

var names = ["Ben", "Joel", "Judy", "Anne"];
var scores = [88, 98, 77, 88];

var $ = function (id) {
return document.getElementById(id);
}

window.onload = function () {

}

Where My JS Currently Sits:

//arrays defined
var names = ["Ben", "Joel", "Judy", "Anne"];
var scores = [88,98, 77, 88];

//Return HTML Element
var $ =function (id) {
return document.getElementById(id);
}

//Display Results EH
var displayResults = function () {
   //Calculate average scores
   var sum = 0;
   var average = 0;
   //Loop through scores for sum
   for (var score in scores ) {
   //Sum scores
       sum += scores[score];
   }
   average = sum / scores.length;
}

//Calculate high score
var high = 0;
//Loop scores to find high score
for ( var score in scores ) {
   if (scores[scores] > high ) {
       //Set high score
       high = scores[scores];
   }
}

//Calculate Low Score
var low = 100;
//Loop through the scores to find 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 ) {
scoresString += names[score] + ", " + scores[score] + " ";
}

$("results").innerHTML = "Average Score = " + average.toFixed(0) + " High Score = " + high.toFixed(0) + " Low Score = " + low.toFixed(0) + " " + scoresString ;
//end displayResults()

window.onload = function () {
$("display").onclick = displayResults;
}

Use a Test Score array Name: Tom Score:99 Results Arezagt Seese·88 Kigh Score-98 Judy, 7 Anne, 88 1. Open the HTML and JavaScript files in this folder: exercises extralchoS est scores Then, run the application to see the user interface shown above, although that interface won't do anything until you develop the JavaScript for it. In the JavaScript file, you'll see some starting code, including the declarations for two arrays. The names array contains four names, and the scores array contains four scores. This assumes that the four scores correspond to the four names. For instance, the first score is for the first name and the last score is for the last name. 2. 3. Write an event handler for the click event of the Display Results button that uses a loop to calculate the average score for the four elements in the scores array. The handler should then display the average score in the textarea element as shown above. 4. Enhance the code for the event handler so it also calculates and displays the high score and low score for the four elements in the array, as shown above. Enhance the code for the event handler so it displays the names and scores of the elements in the arrays, as shown above. 5. 6. 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 If you haven't 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". 7. 8. Make sure that your application moves the cursor to the Name field when the application starts and after a name and score has been added to the array.

Explanation / Answer

// I have modified only javascript part, please add jquery.min.js for this project and your add css too

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test Score Array</title>
</head>
<body>
<section>
<h1>Use a Test Score array</h1>

<label for="score">Score:</label>
<input type="text" id="score"><br>

<h2>Results</h2>
<textarea id="results"> </textarea>

</section>

}
});

</script>
</body>
</html>

Navigate

I am eager to start my health care business in Eye care sector. Where I will be

I am encrypting and storing sensitive values in the database. I have a set max l

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.

I am encountering issues with this assignment. JavaScript has proven itself to b

Question

Explanation / Answer

Related Questions

Navigate