I have a problem here, I have a form to enter scores and calculate the average score. After entering the form, the user clicks on the submit button, it will display a table of scores that have been entered before along with 2 buttons. First button will add a column of average scores to the form and the second button will determine if any average score is >= 8 the letter in that column will be highlighted in red.
Here is my code, i hope someone can help me.
Here is my html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="css/main.css" />
</head>
<body>
<script src="js/script.js"></script>
<h1 align="center">Class Marksheet</h1>
<table align="center">
<tr>
<td>Name:</td>
<td><input name="name" id="name" type="text" /></td>
</tr>
<tr>
<td>Math:</td>
<td><input name="math" id="math" type="text" /></td>
</tr>
<tr>
<td>Physics:</td>
<td><input name="physics" id="physics" type="text" /></td>
</tr>
<tr>
<td>Chemistry:</td>
<td><input name="chemical" id="chemical" type="text" /></td>
</tr>
<td>
<button type="submit" onclick="score_table()">Submit</button>
</td>
</table>
<!--
This table below must not show when user access the browser,
it only show when user click the "Submit" button and 2 button below
-->
<table id="tableScore" border="2" width="100%">
<th>No</th>
<th>Name</th>
<th>Math</th>
<th>Physics</th>
<th>Chemistry</th>
<th>Average Score</th> <!-- This still can not show -->
</table>
<div>
<button onclick="">Show the average score</button> <!--This will show the average score column-->
<button onclick="">Best student</button> <!--Determine if any average score >= 8 hightlight all the text into red-->
</div>
</body>
</html>
My JS file:
var testScore = {
name: "",
math: 0,
physical: 0,
chemistry: 0
};
var i = 0; /* This variable is incremented by 1 every time the user clicks the "Submit" button. Display the "No" column, and the position of rows when added to the table
*/
// Show a table after submit
function score_table() {
document.getElementById("tableScore").style.display="block";
// Gathering the data after submit
testScore.name = document.getElementById("name").value;
testScore.math = document.getElementById("math").value;
testScore.physical = document.getElementById("physics").value;
testScore.chemistry = document.getElementById("chemical").value;
}
Finally, my CSS file:
/* I just do to hidden the table, because i struggle with JS file :)) */
#tableScore {
display: none;
}