Homework SourseJAVASCRIPT HELP ive been working on this problem about 2 wee
JAVASCRIPT HELP! ive been working on this problem about 2 weeks now and i cant seem to get it running. Ive included the HTML and JAVASCRIPT that ive written. Thanks for your time and help!
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 <p> elements.
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.
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 has been added to the table.
If you haven’t 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”.
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>
<head>
<meta charset=\"utf-8\">
<title>Test Score Array</title>
<link rel=\"stylesheet\" href=\"styles.css\" />
<script src=\"test_scores.js\"></script>
</head>
<body>
<main>
<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_results\" value=\"Display Results\" >
<input type=\"button\" id=\"display_scores\" value=\"Display Scores\" ><br>
<div id=\"results\"></div>
<table id=\"scores_table\"></table>
</main>
</body>
</html>
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;
};
Solution
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=\"utf-8\">
<title>Test Score Array</title>
<link rel=\"stylesheet\" href=\"styles.css\" />
<script src=\"test_scores.js\"></script>
</head>
<body>
<main>
<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_results\" value=\"Display Results\" >
<input type=\"button\" id=\"display_scores\" value=\"Display Scores\" ><br>
<div id=\"results\"></div>
<table id=\"scores_table\"></table>
</main>
</body>
</html>
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;
};
function addScore() {
var name = $(\"name\").value;
var score = parseInt($(\"score\").value);
if (isNaN(score) || name.length == 0) {
alert(\"Name or score invalid!\");
} else {
names.push(name);
scores.push(score);
$(\"name\").value = \"\";
$(\"score\").value = \"\";
};
};
function displayResults() {
var avgScore = calcAvg(scores);
var topScore = Math.max(...scores);
var topName = names[scores.indexOf(topScore)];
$(\"results\").innerHTML = \'<h2>Results</h2>\\
<p>Average score = \' + avgScore + \'</p>\\
<p>High score = \' + topName + \' with a score of \' + topScore + \'</p>\';
};
function displayScores() {
var content = \'\';
names.forEach(function(name, i) {
content += \'<tr><td>\' + name + \'</td><td>\' + scores[i] + \'</td></tr>\'
});
$(\"scores_table\").innerHTML = \'<h2>Scores</h2>\\
<tr><th>Name</th><th>Score</th></tr>\' + content;
};
function calcAvg(scores) {
if (scores.length > 0) {
return Math.round(scores.reduce(function(a, b) { return a + b; }, 0) / scores.length);
} else {
return 0;
}
};
style.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;
}
th {
text-align: left;
}
