How to change the value inside a table when click a button?-CodePudding

I have a form and my problem is i want to change the value inside a column. My average column will show after the user submit their score however, it must show the "?" value it only show the calculated average score when user click the button "Show average score". I struggle with my function to show so I really need help. I am appciate and grateful. Let me demonstrate

<!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>Project 2 JS - Nguyễn Quốc An</title>
    <link rel="stylesheet" href="css/main.css" />
  </head>
  <body>
    <script src="js/script.js"></script>
    <h1 align="center">Class Marksheet</h1>

    <!--Form to input score-->
    <table align="center">
      <tr>
        <td>Họ tên:</td>
        <td><input name="name" id="name" type="text" /></td>
      </tr>

      <tr>
        <td>Điểm toán:</td>
        <td>
          <input name="math" min="0" max="10" id="math" type="number" />
        </td>
      </tr>

      <tr>
        <td>Điểm lý:</td>
        <td>
          <input name="physics" min="0" max="10" id="physics" type="number" />
        </td>
      </tr>

      <tr>
        <td>Điểm hóa:</td>
        <td>
          <input name="chemical" min="0" max="10" id="chemical" type="number" />
        </td>
      </tr>

      <td>
        <button type="submit" onclick="score_table()">Submit</button>
      </td>
    </table>

    <!--After click submit show this table-->
    <div id="divTable">
      <table id="tableScore" border="5" align="center">
        <th>No</th>
        <th>Name</th>
        <th>Math</th>
        <th>Physics</th>
        <th>Chemistry</th>
        <th>Average score</th><!--This has the "?" value-->
      </table>

      <!--Click this button to change the value inside average score column-->
      <button onclick="showAvg()" align="center">Show average score</button>

      <!--Tô đậm các học sinh có điểm tb >= 8-->
      <button onclick="showBest()" align="center">
        Xác định học sinh giỏi
      </button>
    </div>
  </body>
</html>

JS file

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

var i = 1;
// Hiển thị ra bảng điểm sau khi nhập
function score_table() {
    
    document.getElementById("divTable").style.display="block";

    // Lấy dữ liệu sau khi nhập
    testScore.name = document.getElementById("name").value;// gán giá trị tên theo id ở input
    testScore.math = document.getElementById("math").value;// gán giá trị toán theo id ở input
    testScore.physical = document.getElementById("physics").value;// gán giá trị vật lý theo id ở input
    testScore.chemistry = document.getElementById("chemical").value;// gán giá trị hóa học theo id ở input
    testScore.avg = "?"
    // Tính điểm trung bình và gán vào biến đã khai báo ở đầu
    //testScore.avg = ((parseFloat(testScore.math)   parseFloat(testScore.physical)   parseFloat(testScore.chemistry)) / 3).toFixed(2);
    
    document.getElementById("name").value = "";// Xóa trắng các ô input của tên
    document.getElementById("math").value = "";// Xóa trắng các ô input của toán
    document.getElementById("physics").value = "";// Xóa trắng các ô input của vật lý
    document.getElementById("chemical").value = "";// Xóa trắng các ô input của hóa học

    // Thêm dữ liệu vào bảng sau khi nhập thông tin
    var table = document.getElementById("tableScore");
    var row = table.insertRow(i);// Tạo table row theo vị trí
    var number = row.insertCell(0);// Table data ở vị trí đầu tiên
    var name = row.insertCell(1);// Vị trí thứ 2
    var math = row.insertCell(2);// Vị trí thứ 3
    var physics = row.insertCell(3);// Vị trí thứ 4
    var chemistry = row.insertCell(4);// Vị trí thứ 5
    var avg = row.insertCell(5);// Vị trí thứ 6
    
    number.innerHTML  = i;// Trả về nội dung HTML
    name.innerHTML  = testScore.name;// Tên sẽ trả về các giá trị đã được nhập
    math.innerHTML  = testScore.math;// Trả về giá trị HTML của toán
    physics.innerHTML  = testScore.physical;// Trả về giá trị HTML của điểm lý
    chemistry.innerHTML  = testScore.chemistry;// Trả về giá trị HTML của điểm hóa
    //avg.innerHTML  = testScore.avg;// Trả về giá trị điểm trung bình
    avg.innerHTML = "?";
    i  ;
}

// I need help here how to change the "?" value in the average score column
function showAvg(avg) {
    var colAvg = ((parseFloat(testScore.math)   parseFloat(testScore.physical)   parseFloat(testScore.chemistry)) / 3).toFixed(2);
    for (var i = 0; i < colAvg.length; i  ) {
      avg.innerHTML = colAvg;
    }
}

// Xác định nếu điểm >= 8 thì bôi đỏ cột và hàng đó
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 {}
    }
  }

CSS file

#divTable {
  display: none;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

#tableScore th:nth-child(6),
#tableScore td:nth-child(6) {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

CodePudding user response：

if you just want to make it work, you could replace those two lines

//avg.innerHTML  = testScore.avg;// Trả về giá trị điểm trung bình
avg.innerHTML = "?";

with this :

showAvg(avg);

You can see a working codepen here : https://codepen.io/Cleverballs/pen/XWzyMYM