Function changing id only once. [Javascript]

Question

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 class="row" id="student-id-details" style="border: 2px solid black;  border-top: none; height: 120px;">
                    <div class="col" style="padding-top: 10px; padding-bottom: 5px; height: 100px;">
                        <h6 class="card-title">${student.name}</h6>
                        <p class="card-text">${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 class="row" id="student-id-image" style="border: 2px solid black;  border-top: none; border-left: none; height: 120px">
                    <div class="col" 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 class="navbar text-center" style="background-color: #59CE8F;">
            <div class="container-fluid text-center">
              <span class="navbar-brand mb-0 h1 text-center" style="color: white;">Student Enrollment Form</span>
            </div>
          </nav>
          
    <div class="container">
      <div class="row">
        <div class="col" style="height: 35px;"></div>
      </div>

      <div class="row">

        <div class="col" style="border-right: 3px solid #59CE8F;"> 

          <form id="student-enrollment-form">
          <div class="row mb-3">
            <label for="name-input" class="col-sm-2 col-form-label">Name</label>
            <div class="col-sm-5">
              <input type="text" class="form-control" id="name-input"/>
            </div>
          </div>

          <div class="row mb-3">
            <label for="email-input" class="col-sm-2 col-form-label">E-Mail</label>
            <div class="col-sm-5">
              <input type="email" class="form-control" id="email-input" required/>
            </div>
          </div>

          <div class="row mb-3">
            <label for="website-input" class="col-sm-2 col-form-label">Website</label>
            <div class="col-sm-5">
              <input type="url" class="form-control" id="website-input" required/>
            </div>
          </div>

          <div class="row mb-3">
            <label for="imglink-input" class="col-sm-2 col-form-label">Img Link</label>
            <div class="col-sm-5">
              <input type="url" class="form-control" id="imglink-input" required/>
            </div>
          </div>

          <fieldset class="row mb-3">
            <legend class="col-form-label col-sm-2 pt-0">Gender</legend>
            <div class="col-sm-10">
              <div class="form-check">
                <input class="form-check-input" type="radio" name="genderRadio" id="gridRadios1" value="male" id="male-input" checked>
                <label class="form-check-label" for="gridRadios1">
                  Male
                </label>
              </div>
              <div class="form-check">
                <input class="form-check-input" type="radio" name="genderRadio" id="gridRadios2" value="female" id="female-input">
                <label class="form-check-label" for="gridRadios2">
                  Female
                </label>
              </div>
            </div>
          </fieldset>

          <div class="row mb-3">
            <label for="skills" class="col-sm-2 col-form-control">Skills</label>
            <div class="col-sm-2">
              <input class="form-check-input" type="checkbox" id="java-gridCheck" value="Java">
              <label class="form-check-label" for="gridCheck">
                JAVA
              </label>
            </div>
            <div class="col-sm-2">
              <input class="form-check-input" type="checkbox" id="html-gridCheck" value="HTML">
              <label class="form-check-label" for="gridCheck">
                HTML
              </label>
            </div>
            <div class="col-sm-2">
              <input class="form-check-input" type="checkbox" id="css-gridCheck" value="CSS">
              <label class="form-check-label" for="gridCheck">
                CSS
              </label>
            </div>
          </div>

          <div class="row mb-3">
            <div class="col-4">
              <button type="button" class="btn btn-primary" onclick="getStudentDetails(event)">Enroll Student</button>
            </div>
            <div class="col-2" style="margin-left: -30px;">
              <button type="clear" class="btn btn-danger">Clear</button>
            </div>
          </div>


        </div>
          
        </form>


        <div class="col" id="student-ids">
          <h3 id="right-col-header">Enrolled Students</h3>
          <div class="row mb-4"></div>
          <div class="row">
            <div class="col-2"></div>

            <div class="col-5" style="text-align: left;">
              <div class="row" style="border: 2px solid black;">
                <div class="col">
                  Description
                </div>
              </div>
              <div class="student-list-division" id="student-list">
                
              </div>
            </div>

            <div class="col-3" style="align-items: centre;">
              <div class="row" style="border: 2px solid black; border-left: none;">
                <div class="col">
                  Image
                </div>
              </div>
              <div class="student-list-images" id="student-images">

              </div>
            </div>

            <div class="col-2"></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.

get an array of all the elements you want to change -> run a for-loop and remove their ID and set a new ID — tacoshy
– tacoshy, Commented Aug 16, 2022 at 6:45
@tacoshy var oldIds = document.querySelectorAll("student-id-details"); var oldIdsArray = Array.from(oldIds); oldIdsArray is giving an empty array when i console.log it. I do not know why. Can you help in how can I achieve it? — Innomight
– Innomight, Commented Aug 16, 2022 at 7:07
querySelectorAll("student-id-details") selects tags. To select ids you ahve to use a hash before. Last but not least it will not return an array but a node-list. — tacoshy
– tacoshy, Commented Aug 16, 2022 at 10:03

Hassan Siddiqui · Accepted Answer · 2022-08-16 07:46:14Z

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 class="row ${enrolledStudents.length === (index + 1) ? 'fade-in-animation' : ''}" style="border: 2px solid black;  border-top: none; height: 120px;">
                    <div class="col" style="padding-top: 10px; padding-bottom: 5px; height: 100px;">
                        <h6 class="card-title">${student.name}</h6>
                        <p class="card-text">${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 class="row ${enrolledStudents.length === (index + 1) ? 'fade-in-animation' : ''}" style="border: 2px solid black;  border-top: none; border-left: none; height: 120px">
                    <div class="col" 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 class="navbar text-center" style="background-color: #59CE8F;">
            <div class="container-fluid text-center">
              <span class="navbar-brand mb-0 h1 text-center" style="color: white;">Student Enrollment Form</span>
            </div>
          </nav>
          
    <div class="container">
      <div class="row">
        <div class="col" style="height: 35px;"></div>
      </div>

      <div class="row">

        <div class="col" style="border-right: 3px solid #59CE8F;"> 

          <form id="student-enrollment-form">
          <div class="row mb-3">
            <label for="name-input" class="col-sm-2 col-form-label">Name</label>
            <div class="col-sm-5">
              <input type="text" class="form-control" id="name-input"/>
            </div>
          </div>

          <div class="row mb-3">
            <label for="email-input" class="col-sm-2 col-form-label">E-Mail</label>
            <div class="col-sm-5">
              <input type="email" class="form-control" id="email-input" required/>
            </div>
          </div>

          <div class="row mb-3">
            <label for="website-input" class="col-sm-2 col-form-label">Website</label>
            <div class="col-sm-5">
              <input type="url" class="form-control" id="website-input" required/>
            </div>
          </div>

          <div class="row mb-3">
            <label for="imglink-input" class="col-sm-2 col-form-label">Img Link</label>
            <div class="col-sm-5">
              <input type="url" class="form-control" id="imglink-input" required/>
            </div>
          </div>

          <fieldset class="row mb-3">
            <legend class="col-form-label col-sm-2 pt-0">Gender</legend>
            <div class="col-sm-10">
              <div class="form-check">
                <input class="form-check-input" type="radio" name="genderRadio" id="gridRadios1" value="male" id="male-input" checked>
                <label class="form-check-label" for="gridRadios1">
                  Male
                </label>
              </div>
              <div class="form-check">
                <input class="form-check-input" type="radio" name="genderRadio" id="gridRadios2" value="female" id="female-input">
                <label class="form-check-label" for="gridRadios2">
                  Female
                </label>
              </div>
            </div>
          </fieldset>

          <div class="row mb-3">
            <label for="skills" class="col-sm-2 col-form-control">Skills</label>
            <div class="col-sm-2">
              <input class="form-check-input" type="checkbox" id="java-gridCheck" value="Java">
              <label class="form-check-label" for="gridCheck">
                JAVA
              </label>
            </div>
            <div class="col-sm-2">
              <input class="form-check-input" type="checkbox" id="html-gridCheck" value="HTML">
              <label class="form-check-label" for="gridCheck">
                HTML
              </label>
            </div>
            <div class="col-sm-2">
              <input class="form-check-input" type="checkbox" id="css-gridCheck" value="CSS">
              <label class="form-check-label" for="gridCheck">
                CSS
              </label>
            </div>
          </div>

          <div class="row mb-3">
            <div class="col-4">
              <button type="button" class="btn btn-primary" onclick="getStudentDetails(event)">Enroll Student</button>
            </div>
            <div class="col-2" style="margin-left: -30px;">
              <button type="clear" class="btn btn-danger">Clear</button>
            </div>
          </div>


        </div>
          
        </form>


        <div class="col" id="student-ids">
          <h3 id="right-col-header">Enrolled Students</h3>
          <div class="row mb-4"></div>
          <div class="row">
            <div class="col-2"></div>

            <div class="col-5" style="text-align: left;">
              <div class="row" style="border: 2px solid black;">
                <div class="col">
                  Description
                </div>
              </div>
              <div class="student-list-division" id="student-list">
                
              </div>
            </div>

            <div class="col-3" style="align-items: centre;">
              <div class="row" style="border: 2px solid black; border-left: none;">
                <div class="col">
                  Image
                </div>
              </div>
              <div class="student-list-images" id="student-images">

              </div>
            </div>

            <div class="col-2"></div>
          </div>
        </div>
      </div>

    </div>

  </body>
</html>

Thank you for the answer. I did the changes but Id still does not change. When I keep adding entry, the nodelist for id "#student-id-details" keeps increasing and there no change in animations nor in changed id list. What should I do? Edit: Moreover, i consoled the list from getElementsByClassName and it is showing Empty HTML collection list no matter how many entries i add.
Sorry, I did a mistake. The ids changed as I wanted. Thank you. But why are animations applied to every entry still even when there is no division with Id "student-id-details"?
Above code snippet updated, i hope it'll resolve your issue. Thank you

Collectives™ on Stack Overflow

Function changing id only once. [Javascript]

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related