'How to show a table after submit a form

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.

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>

<!--
This is a form for users to enter scores
-->
    <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 after user enter score and click the "Submit" button with 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;
    testScore.avg = "?";
    document.getElementById("name").value = "";
    document.getElementById("math").value = "";
    document.getElementById("physics").value = "";
    document.getElementById("chemical").value = "";

// Insert row
    var table = document.getElementById("tableScore");
    var row = table.insertRow();
    var number = row.insertRow();
    var name = row.insertRow();
    var math = row.insertRow();
    var physics = row.insertRow();
    var chemistry = row.insertRow();
    var avg = row.insertRow();
    
    number.innerHtml = i;
    name.innerHtml = testScore.name;
    math.innerHtml = testScore.math;
    physics.innerHtml = testScore.physics;
    chemistry.innerHtml = testScore.chemistry;
    avg.innerHtml = "?";

/** I need help, How to calculate the average score and if the average 
score is >= 8 then hightlight every text in that row into red
 */
}

Finally, my CSS file:

/* I just do to hidden the table, because i struggle with JS file :)) */
#tableScore {
  display: none;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'How to show a table after submit a form

Sources

Related Questions