Array displayed inside Html table

I got this code for an array an infinite array in javascript and I can add more to it delete from it update elements inside of it. I need to show that array as a table in html page the design does not matter I can work on that.

I am only allowed to use JavaScript not jQuery, I'm really not sure what to do here.

let students = [];
let x = 0;
document.getElementById("submit").addEventListener("click", (e) => {
  e.preventDefault();
  let nameInputEl = document.getElementById("name");
  let idInputEl = document.getElementById("idNumber");
  let gdpaInputEl = document.getElementById("gdpa");

  // Validation for input
  inputValidation(nameInputEl.value, idInputEl.value, gdpaInputEl.value);

  // insert student
  if (x == 1) {
    insertStudent(nameInputEl.value, idInputEl.value, gdpaInputEl.value);
  }

  // Show success message
});

function inputValidation(name, id, gdpa) {
  // check for the value of each element

  if (name == "") {
    document.getElementById("Error101").style.display = "block";
  } else if (id == "") {
    document.getElementById("Error101").style.display = "block";
  } else if (gdpa == "") {
    document.getElementById("Error101").style.display = "block";
  } else {
    document.getElementById("Succes101").style.display = "block";
    x = 1;
  }
  setTimeout(function() {
    document.getElementById("Error101").style.display = "none";
    document.getElementById("Succes101").style.display = "none";
  }, 3000);
}

function insertStudent(name, id, gdpa) {
  let student = {
    name: name,
    id: id,
    gdpa: gdpa,
  };
  students.push(student);
  console.log("students array: ", students);
  x = 0;
}

function showList() {
  students.forEach(element => {
    document.getElementById("showLi").innerHTML = (students);
  });
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" />
  <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
  <link rel="stylesheet" href="assets/style.css" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>School Managment System</title>
</head>

<body>
  <div class="container">
    <div class="big-title">
      <h2 class="title">Assignment</h2>
      <span class="ligne"> </span>
    </div>
    <div class="big_box col-md-12">
      <form>
        <!-- student name -->
        <div class="from-control col-md-4">
          <label for="name" class="Name_Label">Student Name</label>
          <input type="text" class="Name_Input" id="name" placeholder="jo aqra" />
        </div>
        <!-- student name -->

        <!-- student id -->
        <div class="from-control col-md-4">
          <label for="idNumber" class="NO_Label">Student ID</label>
          <input type="number" class="NO_Input" id="idNumber" placeholder="411420876" />
        </div>
        <!-- student id -->

        <!-- student gdpa -->
        <div class="from-control col-md-4">
          <label for="gdpa" class="gp_Label">Student GDPA</label>
          <input type="number" step="0.01" class="gp_Input" id="gdpa" placeholder="3.50" />
        </div>
        <!-- student gdpa -->
        <div class="col-md-12">
          <button id="submit" type="submit">Add</button>
          <button id="list" id="list" type="button" onclick="showList()">Show</button>
        </div>
      </form>
    </div>

  </div>
  <div id="ShowLi"></div>



  <div class="Error" id="Error101" aria-hidden="true"><i class="far fa-times-circle"></i>Please fill all the empty fields</div>
  <div class="Succes" id="Succes101" aria-hidden="true"><i class="fas fa-check"></i>Student added</div>

  <script src="./src/main.js"></script>
</body>

</html>



Read more here: https://stackoverflow.com/questions/66277399/array-displayed-inside-html-table

Content Attribution

This content was originally published by Al-Meqdad Jabi at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: