How to show a table after submit a form-CodePudding

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

CodePudding user response：

There are a few problems with your source code.
1. you used testScore.avg, but you did not declare avg in the variable testScore.
2.it is better to use type="number" as the input for the scores, or you need to add pattern="yourpattern" to disallow input of alphabets and special characters.
3.innerHtml is not the correct syntax, use innerHTML instead.
4.You only need to use one insertRow().As for the other fields, you should use insertCell()instead.
5.You need to insert a number into the insertRow/insertCell method. Eg.insertRow(x);
As for calculating the average, you can easily find it by adding the three fields and dividing them by the number of fields.
It is also better to hide the whole division instead of just the table, don't you think it's weird that you have button in the website but it does nothing?
You can also add the input fields inside a form, so that you can add mandatory attribute to the fields to ensure no null values will be added into the table.
You also need to add i ; in your function, otherwise all the numbers in the column "No" of your table will be the same number.
To hide/show a certain column in the table, you can use nth-child in the css/js.
Last and the most important issue, check your spelling. Some you use physics, some use physical, some use chemistry, but some use chemical, this is very confusing and will bring a hard time during maintenance or debugging in the future. You can also easily encounter a lot of errors this way. Eg. you declared as testScore.physical, but in the function you used testScore.physics
Choose one variable name and stick with it.

var testScore = {
  name: "",
  math: 0,
  physics: 0,
  chemistry: 0,
  avg: 0
};
var i = 1;
/* 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("divTable").style.display = "block";

  // Gathering the data after submit
  testScore.name = document.getElementById("name").value;
  testScore.math = document.getElementById("math").value;
  testScore.physics = document.getElementById("physics").value;
  testScore.chemistry = document.getElementById("chemical").value;
  testScore.avg = (parseFloat(testScore.math)   parseFloat(testScore.physics)   parseFloat(testScore.chemistry)) / 3;
  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(i);
  var number = row.insertCell(0);
  var name = row.insertCell(1);
  var math = row.insertCell(2);
  var physics = row.insertCell(3);
  var chemistry = row.insertCell(4);
  var avg = row.insertCell(5);

  number.innerHTML = i;
  name.innerHTML = testScore.name;
  math.innerHTML = testScore.math;
  physics.innerHTML = testScore.physics;
  chemistry.innerHTML = testScore.chemistry;
  avg.innerHTML = testScore.avg;
  i  ;
  /** 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
   */
}

function showAvg() {
  document.getElementById("tableScore").querySelector("th:nth-child(6)").style.display = "block";

  var colAvg = document.getElementById("tableScore").querySelectorAll("td:nth-child(6n)");
  for (var i = 0; i < colAvg.length; i  ) {
    colAvg[i].style.display = "block";
  }
}

function showBest() {
  var colAvg = document.getElementById("tableScore").querySelectorAll("td:nth-child(6n)");
  var rowAvg = document.getElementById("tableScore").querySelectorAll("tr:nth-child(1n)");

  for (var i = 0; i < colAvg.length; i  ) {
    var avg = parseFloat(colAvg[i].innerText);
    if (avg >= 8) {
      rowAvg[i   1].style.background = "red";
    } else {}
  }
}

/* I just do to hidden the table, because i struggle with JS file :)) */

#divTable {
  display: none;
  width: 100%;
}

#tableScore th:nth-child(6),
#tableScore td:nth-child(6) {
  display: none;
}

<!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="number" /></td>
    </tr>

    <tr>
      <td>Physics:</td>
      <td><input name="physics" id="physics" type="number" /></td>
    </tr>

    <tr>
      <td>Chemistry:</td>
      <td><input name="chemical" id="chemical" type="number" /></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
    -->
  <div id="divTable">
    <table id="tableScore" border="2">
      <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>

  
    <button onclick="showAvg()">Show the average score</button>
    <!--This will show the average score column-->
    <button onclick="showBest()">Best student</button>
    <!--Determine if any average score >= 8 hightlight all the text into red-->
  </div>
</body>

</html>