What I am trying to do: I am adding new entries whenever I submit a form and that entry should have an animation (fadeIn effect). I am adding new entries whenever I submit a form. Every entry is being added using javascript template literal in which I am adding using divisions with classes and ids. Every entry has an Id and when I use that ID to add animation, all entries get the animation as they have same ids (I know IDs should not be same that is why I am trying to change it).
What I am trying to do: I am trying to change ID of previously added entry or div. Program is changing ID only once.
My javascript code:
var enrolledStudents = [];
let form = document.getElementById("student-enrollment-form");
const getStudentDetails = (event) => {
event.preventDefault();
// This is the important part, test if form is valid
if (form.checkValidity() === false){
// This is the magic function that displays the validation errors to the user
form.reportValidity();
return;
}
var skillsList = [];
var name = document.getElementById("name-input").value;
var email = document.getElementById("email-input").value;
var website = document.getElementById("website-input").value;
var imgLink = document.getElementById("imglink-input").value;
var gender = document.querySelector('input[name="genderRadio"]:checked').value;
var skills = document.querySelectorAll('input[type="checkbox"]');
skills.forEach(item => {
if (item.checked){
skillsList.push(item.value);
}
})
var student = {
'name': name,
'email': email,
'website': website,
'imageLink' : imgLink,
'gender': gender,
'skills': skillsList,
}
enrolledStudents.push(student)
console.log(enrolledStudents);
const studentList = document.getElementById('student-list');
studentList.innerHTML = `${
enrolledStudents.map(student => {
var passport = student.imgLink;
return `
<div id="student-id-details" style="border: 2px solid black; border-top: none; height: 120px;">
<div style="padding-top: 10px; padding-bottom: 5px; height: 100px;">
<h6 >${student.name}</h6>
<p >${student.gender}<br />${student.email}<br />${student.website}<br />${student.skills}</p>
</div>
</div>
`;
}).join("")
}`
const studentImages = document.getElementById("student-images");
console.log(enrolledStudents)
studentImages.innerHTML = `${
enrolledStudents.map(student => {
return `
<div id="student-id-image" style="border: 2px solid black; border-top: none; border-left: none; height: 120px">
<div style="padding-top: 10px; padding-bottom: 6px; height: 120px; align-items: centre;">
<img src=${student.imageLink}></img>
</div>
</div>
`
}).join("")
}`
setTimeout(changeIds, 3000);
}
const changeIds = () => {
var oldId = document.getElementById("student-id-details");
oldId.id = "no-animation";
console.log(document.querySelectorAll("#student-id-details"));
console.log(document.querySelectorAll("#no-animation"));
}
I cannot use any library or framework for doing this task. In changeIds function, I am changing the ID. When I keep adding new entries there is only 1 node in no-animation NodeList (the first entry) and after that no ID change is taking effect.
What can be the problem here?
My html code for reference -
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Student Enrollment</title>
<link href="style.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<nav style="background-color: #59CE8F;">
<div >
<span style="color: white;">Student Enrollment Form</span>
</div>
</nav>
<div >
<div >
<div style="height: 35px;"></div>
</div>
<div >
<div style="border-right: 3px solid #59CE8F;">
<form id="student-enrollment-form">
<div >
<label for="name-input" >Name</label>
<div >
<input type="text" id="name-input"/>
</div>
</div>
<div >
<label for="email-input" >E-Mail</label>
<div >
<input type="email" id="email-input" required/>
</div>
</div>
<div >
<label for="website-input" >Website</label>
<div >
<input type="url" id="website-input" required/>
</div>
</div>
<div >
<label for="imglink-input" >Img Link</label>
<div >
<input type="url" id="imglink-input" required/>
</div>
</div>
<fieldset >
<legend >Gender</legend>
<div >
<div >
<input type="radio" name="genderRadio" id="gridRadios1" value="male" id="male-input" checked>
<label for="gridRadios1">
Male
</label>
</div>
<div >
<input type="radio" name="genderRadio" id="gridRadios2" value="female" id="female-input">
<label for="gridRadios2">
Female
</label>
</div>
</div>
</fieldset>
<div >
<label for="skills" >Skills</label>
<div >
<input type="checkbox" id="java-gridCheck" value="Java">
<label for="gridCheck">
JAVA
</label>
</div>
<div >
<input type="checkbox" id="html-gridCheck" value="HTML">
<label for="gridCheck">
HTML
</label>
</div>
<div >
<input type="checkbox" id="css-gridCheck" value="CSS">
<label for="gridCheck">
CSS
</label>
</div>
</div>
<div >
<div >
<button type="button" onclick="getStudentDetails(event)">Enroll Student</button>
</div>
<div style="margin-left: -30px;">
<button type="clear" >Clear</button>
</div>
</div>
</div>
</form>
<div id="student-ids">
<h3 id="right-col-header">Enrolled Students</h3>
<div ></div>
<div >
<div ></div>
<div style="text-align: left;">
<div style="border: 2px solid black;">
<div >
Description
</div>
</div>
<div id="student-list">
</div>
</div>
<div style="align-items: centre;">
<div style="border: 2px solid black; border-left: none;">
<div >
Image
</div>
</div>
<div id="student-images">
</div>
</div>
<div ></div>
</div>
</div>
</div>
</div>
<script src="script_js.js"></script>
</body>
</html>
My css code for animation -
#right-col-header{
text-align: center;
}
ul{
padding-left: 0;
list-style-type: none;
}
p{
font-size: 13px;
}
img{
height: 6em;
width: 6em;
}
#student-ids{
height: 90%;
overflow-x: auto;
}
#student-id-image{
animation: fadeIn 2s;
-webkit-animation: fadeIn 2s;
}
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
#student-id-details{
animation: fadeIn 2s;
-webkit-animation: fadeIn 2s;
}
I would appreciate different solutions for achieving animations in new entries only too.
CodePudding user response：
You have to apply fade-in-animation class to new entry, current logic apply animation class to all list.
I just update your code with minor changes, i hope it'll help you out. Thank You
var enrolledStudents = [];
let form = document.getElementById("student-enrollment-form");
const getStudentDetails = (event) => {
event.preventDefault();
// This is the important part, test if form is valid
if (form.checkValidity() === false){
// This is the magic function that displays the validation errors to the user
form.reportValidity();
return;
}
var skillsList = [];
var name = document.getElementById("name-input").value;
var email = document.getElementById("email-input").value;
var website = document.getElementById("website-input").value;
var imgLink = document.getElementById("imglink-input").value;
var gender = document.querySelector('input[name="genderRadio"]:checked').value;
var skills = document.querySelectorAll('input[type="checkbox"]');
skills.forEach(item => {
if (item.checked){
skillsList.push(item.value);
}
})
var student = {
'name': name,
'email': email,
'website': website,
'imageLink' : imgLink,
'gender': gender,
'skills': skillsList,
}
enrolledStudents.push(student)
console.log(enrolledStudents);
const studentList = document.getElementById('student-list');
studentList.innerHTML = `${
enrolledStudents.map((student, index) => {
var passport = student.imgLink;
return `
<div style="border: 2px solid black; border-top: none; height: 120px;">
<div style="padding-top: 10px; padding-bottom: 5px; height: 100px;">
<h6 >${student.name}</h6>
<p >${student.gender}<br />${student.email}<br />${student.website}<br />${student.skills} ${index}</p>
</div>
</div>
`;
}).join("")
}`
const studentImages = document.getElementById("student-images");
console.log(enrolledStudents)
studentImages.innerHTML = `${
enrolledStudents.map((student, index) => {
return `
<div style="border: 2px solid black; border-top: none; border-left: none; height: 120px">
<div style="padding-top: 10px; padding-bottom: 6px; height: 120px; align-items: centre;">
<img src=${student.imageLink}></img>
</div>
</div>
`
}).join("")
}`
}#right-col-header{
text-align: center;
}
ul{
padding-left: 0;
list-style-type: none;
}
p{
font-size: 13px;
}
img{
height: 6em;
width: 6em;
}
#student-ids{
height: 90%;
overflow-x: auto;
}
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
.fade-in-animation{
animation: fadeIn 2s;
-webkit-animation: fadeIn 2s;
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Student Enrollment</title>
<link href="style.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<nav style="background-color: #59CE8F;">
<div >
<span style="color: white;">Student Enrollment Form</span>
</div>
</nav>
<div >
<div >
<div style="height: 35px;"></div>
</div>
<div >
<div style="border-right: 3px solid #59CE8F;">
<form id="student-enrollment-form">
<div >
<label for="name-input" >Name</label>
<div >
<input type="text" id="name-input"/>
</div>
</div>
<div >
<label for="email-input" >E-Mail</label>
<div >
<input type="email" id="email-input" required/>
</div>
</div>
<div >
<label for="website-input" >Website</label>
<div >
<input type="url" id="website-input" required/>
</div>
</div>
<div >
<label for="imglink-input" >Img Link</label>
<div >
<input type="url" id="imglink-input" required/>
</div>
</div>
<fieldset >
<legend >Gender</legend>
<div >
<div >
<input type="radio" name="genderRadio" id="gridRadios1" value="male" id="male-input" checked>
<label for="gridRadios1">
Male
</label>
</div>
<div >
<input type="radio" name="genderRadio" id="gridRadios2" value="female" id="female-input">
<label for="gridRadios2">
Female
</label>
</div>
</div>
</fieldset>
<div >
<label for="skills" >Skills</label>
<div >
<input type="checkbox" id="java-gridCheck" value="Java">
<label for="gridCheck">
JAVA
</label>
</div>
<div >
<input type="checkbox" id="html-gridCheck" value="HTML">
<label for="gridCheck">
HTML
</label>
</div>
<div >
<input type="checkbox" id="css-gridCheck" value="CSS">
<label for="gridCheck">
CSS
</label>
</div>
</div>
<div >
<div >
<button type="button" onclick="getStudentDetails(event)">Enroll Student</button>
</div>
<div style="margin-left: -30px;">
<button type="clear" >Clear</button>
</div>
</div>
</div>
</form>
<div id="student-ids">
<h3 id="right-col-header">Enrolled Students</h3>
<div ></div>
<div >
<div ></div>
<div style="text-align: left;">
<div style="border: 2px solid black;">
<div >
Description
</div>
</div>
<div id="student-list">
</div>
</div>
<div style="align-items: centre;">
<div style="border: 2px solid black; border-left: none;">
<div >
Image
</div>
</div>
<div id="student-images">
</div>
</div>
<div ></div>
</div>
</div>
</div>
</div>
</body>
</html>