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) => {
  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,
  console.log("students array: ", students);
  x = 0;

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

  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <link rel="stylesheet" href="" />
  <link href="" rel="stylesheet" />
  <link rel="stylesheet" href="" />
  <link rel="stylesheet" href="assets/style.css" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>School Managment System</title>

  <div class="container">
    <div class="big-title">
      <h2 class="title">Assignment</h2>
      <span class="ligne"> </span>
    <div class="big_box col-md-12">
        <!-- 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" />
        <!-- 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" />
        <!-- 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" />
        <!-- 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 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>


Read more here:

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: