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>
You mean this
ALSO change
to
and change
to
Here is YOUR code with ONLY my change and
<ol id="ShowLi"></ol>
spark master tape propecia – http://finasteridepls.com/ propecia increased hair loss