My submited table does not show on the browser-CodePudding

I have a scoreboard where the user can enter the score and when the user presses the "Submit" button it will show a table that will contain the information that the user has entered. But when I try it in the browser, my table doesn't show the information that was entered in the previous form, it only show the table heading. Let me explain like below:

var testScore = {
  name: "",
  math: 0,
  physical: 0,
  chemistry: 0,
  avg: 0
};

var i = 1;
// This is the table will show after submited
function score_table() {

  document.getElementById("divTable").style.display = "block";

  // Gathering the data
  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 = (parseFloat(testScore.math)   parseFloat(testScore.physics)   parseFloat(testScore.chemistry)) / 3;
  // How to get this average score has the form like 8,33 or 6,69, I need //help
  document.getElementById("name").value = "";
  document.getElementById("math").value = "";
  document.getElementById("physics").value = "";
  document.getElementById("chemical").value = "";

  // Add the information but why it does not work
  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  ;
}

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

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

<script src="js/script.js"></script>
<h1 align="center">Class Marksheet</h1>

<!--This is the first table when user access the browser-->
<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>
    <!--This button will show the second table below-->
    <button type="submit" onclick="score_table()">Submit</button>
  </td>
</table>

<div id="divTable">
  <!--This table only show when user click on the "Submit" button and it contains 
all the information that submitted. But I try on browser and it is not show the information.
-->
  <table id="tableScore" border="2">
    <th>No</th>
    <th>Name</th>
    <th>Math</th>
    <th>Physics</th>
    <th>Chemistry</th>
    <th>Average score</th>
  </table>

  <button onclick="showAvg()">Show the average score</button>
  <button onclick="showBest()">Best student</button>
</div>

CodePudding user response：

In js code you have used innerHtml instead of innerHTML.

Updated code:

var testScore = {
    name: "",
    math: 0,
    physical: 0,
    chemistry: 0,
    avg: 0
};

var i = 1;
// This is the table will show after submited
function score_table() {

    document.getElementById("divTable").style.display = "block";

    // Gathering the data
    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 = (parseFloat(testScore.math)   parseFloat(testScore.physics)   parseFloat(testScore.chemistry)) / 3;
    // How to get this average score has the form like 8,33 or 6,69, I need //help
    document.getElementById("name").value = "";
    document.getElementById("math").value = "";
    document.getElementById("physics").value = "";
    document.getElementById("chemical").value = "";

    // Add the information but why it does not work
    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  ;
}

@import url('https://fonts.googleapis.com/css2?family=Bree Serif&family=Caveat:wght@400;700&family=Lobster&family=Monoton&family=Open Sans:ital,wght@0,400;0,700;1,400;1,700&family=Playfair Display SC:ital,wght@0,400;0,700;1,700&family=Playfair Display:ital,wght@0,400;0,700;1,700&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&family=Source Sans Pro:ital,wght@0,400;0,700;1,700&family=Work Sans:ital,wght@0,400;0,700;1,700&display=swap');

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

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

<!DOCTYPE html>
<html>

<head> </head>

<body>
    <script src="js/script.js"></script>
    <h1 align="center">Class Marksheet</h1>

    <!--This is the first table when user access the browser-->
    <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>
            <!--This button will show the second table below-->
            <button type="submit" onclick="score_table()">Submit</button>
        </td>
    </table>

    <div id="divTable">
        <!--This table only show when user click on the "Submit" button and it contains 
all the information that submitted. But I try on browser and it is not show the information.
-->
        <table id="tableScore" border="2">
            <th>No</th>
            <th>Name</th>
            <th>Math</th>
            <th>Physics</th>
            <th>Chemistry</th>
            <th>Average score</th>
        </table>

        <button onclick="showAvg()">Show the average score</button>
        <button onclick="showBest()">Best student</button>
    </div>
</body>

</html>

CodePudding user response：

When you use insertCell you need to use innerHTML or appendChild instead of the non-existent innerHtml

Also you do not need to have any integer in insertCell/Row

Also your HTML was invalid

number.appendChild(document.createTextNode(i));
name.appendChild(document.createTextNode(testScore.name));
math.appendChild(document.createTextNode(testScore.math));
physics.appendChild(document.createTextNode(testScore.physics));
chemistry.appendChild(document.createTextNode(testScore.chemistry));
avg.appendChild(document.createTextNode(testScore.avg));

var testScore = {
  name: "",
  math: 0,
  physical: 0,
  chemistry: 0,
  avg: 0
};

var i = 1;
// This is the table will show after submited
function score_table() {

  document.getElementById("divTable").style.display = "block";

  // Gathering the data
  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;
  // How to get this average score has the form like 8,33 or 6,69, I need //help
  document.getElementById("name").value = "";
  document.getElementById("math").value = "";
  document.getElementById("physics").value = "";
  document.getElementById("chemical").value = "";

  // Add the information but why it does not work
  var table = document.querySelector("#tableScore tbody");
  var row = table.insertRow();
  var number = row.insertCell();
  var name = row.insertCell();
  var math = row.insertCell();
  var physics = row.insertCell();
  var chemistry = row.insertCell();
  var avg = row.insertCell();

  number.appendChild(document.createTextNode(i));
  name.appendChild(document.createTextNode(testScore.name));
  math.appendChild(document.createTextNode(testScore.math));
  physics.appendChild(document.createTextNode(testScore.physics));
  chemistry.appendChild(document.createTextNode(testScore.chemistry));
  avg.innerHTML = testScore.avg; // alternative to appendChild
  i  ;

}

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

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

<script src="js/script.js"></script>
<h1 align="center">Class Marksheet</h1>

<!--This is the first table when user access the browser-->
<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>
    <!--This button will show the second table below-->
    <button type="submit" onclick="score_table()">Submit</button>
  </td>
</table>

<div id="divTable">
  <!--This table only show when user click on the "Submit" button and it contains 
all the information that submitted. But I try on browser and it is not show the information.
-->
  <table border="2" id="tableScore">
    <thead>
      <th>No</th>
      <th>Name</th>
      <th>Math</th>
      <th>Physics</th>
      <th>Chemistry</th>
      <th>Average score</th>
    </thead>
    <tbody>
    </tbody>
  </table>

  <button onclick="showAvg()">Show the average score</button>
  <button onclick="showBest()">Best student</button>
</div>

CodePudding user response：

You have some misspelled variables but you can also minimize your output with only one global innerHTML like in my example below:

var testScore = {
  name: "",
  math: 0,
  physical: 0,
  chemistry: 0,
  avg: 0
};

var i = 1;
// This is the table will show after submited
function score_table() {

  document.getElementById("divTable").style.display = "block";

  // Gathering the data
  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 = (parseFloat(testScore.math)   parseFloat(testScore.physics)   parseFloat(testScore.chemistry)) / 3;
  // How to get this average score has the form like 8,33 or 6,69, I need //help
  document.getElementById("name").value = "";
  document.getElementById("math").value = "";
  document.getElementById("physics").value = "";
  document.getElementById("chemical").value = "";

//MINIMIZED VERSION
document.getElementById("tableScore").innerHTML  =
"<td>"   i   "</td>"  
"<td>"    testScore.name   "</td>"  
"<td>"    testScore.math   "</td>"  
"<td>"    testScore.physical   "</td>"  
"<td>"    testScore.chemistry   "</td>"  
"<td>"    testScore.avg   "</td>"; 
  i  ;
}

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

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

<script src="js/script.js"></script>
<h1 align="center">Class Marksheet</h1>

<!--This is the first table when user access the browser-->
<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>
    <!--This button will show the second table below-->
    <button type="submit" onclick="score_table()">Submit</button>
  </td>
</table>

<div id="divTable">
  <!--This table only show when user click on the "Submit" button and it contains 
all the information that submitted. But I try on browser and it is not show the information.
-->
  <table id="tableScore" border="2">
    <th>No</th>
    <th>Name</th>
    <th>Math</th>
    <th>Physics</th>
    <th>Chemistry</th>
    <th>Average score</th>
  </table>

  <button onclick="showAvg()">Show the average score</button>
  <button onclick="showBest()">Best student</button>
</div>