Select and add an event listener to an element inside a template literal string

Question

I want to add an event listener to icon img which first one to delete and second for edit. How can I select img from template string in this code?

function renderStudentList() {
tableBody.innerHTML = "";
studentList.map((student) => {
    const studentRow = `
        
            ${student.id}
            ${student.name}
            ${student.surname}
            ${student.birthday}
            ${student.age}
            ${student.gender === "M" ? "Male" : "Female"}
            
                
                
            
        
    `;
    tableBody.insertAdjacentHTML("beforeend", studentRow);

})
}

user_15288641 · Answer

You can set up the click handlers while generating the template. This way you don't have to query them afterwards. Like so:

function deleteClickHandler() {}
function editClickHandler() {}

function renderStudentList() {
  tableBody.innerHTML = "";
  studentList.map((student) => {
    const studentRow = `
      
        ${student.id}
        ${student.name}
        ${student.surname}
        ${student.birthday}
        ${student.age}
        ${student.gender === "M" ? "Male" : "Female"}
        
          
          
        
      
    `;
    tableBody.insertAdjacentHTML("beforeend", studentRow);
  });
}

user_15142613 · Answer

Vanilla Javascript Solution

    let studentList = [
        {
            id: 1,
            name: 'John',
            surname: 'Doa',
            birthday: '01/01/2004',
            age: 18,
            gender: "M"
        },
        {
            id: 2,
            name: 'Jane',
            surname: 'Doa',
            birthday: '01/01/2004',
            age: 18,
            gender: "F"
        },
        {
            id: 3,
            name: 'John',
            surname: 'Doa',
            birthday: '01/01/2004',
            age: 18,
            gender: "M"
        }
    ]
    function renderStudentList() {
        let tableBody = document.querySelector('.table-body');
        studentList.map((student) => {
            let trTag = document.createElement('tr');
            let idTag = document.createElement('td');
            let nameTag = document.createElement('td');
            let surnameTag = document.createElement('td');
            let birthdayTag = document.createElement('td');
            let ageTag = document.createElement('td');
            let genderTag = document.createElement('td');

            let optionTag = document.createElement('td');
            let editTag = document.createElement('img');
            let delTag = document.createElement('img');

            idTag.innerHTML = student.id;
            nameTag.innerHTML = student.name;
            surnameTag.innerHTML = student.surname;
            birthdayTag.innerHTML = student.birthday;
            ageTag.innerHTML = student.age;
            genderTag.innerHTML = student.gender === "M" ? "Male" : "Female";

            editTag.src = "/edit.svg";
            editTag.alt="edit";

            delTag.src = "/delete.svg";
            delTag.alt="delete";

            editTag.addEventListener('click', () => {
                alert('edit');
            });

            delTag.addEventListener('click', () => {
                alert('delete');
            });

            optionTag.append(editTag);
            optionTag.append(delTag);

            trTag.append(idTag);
            trTag.append(nameTag)
            trTag.append(surnameTag)
            trTag.append(birthdayTag)
            trTag.append(ageTag)
            trTag.append(genderTag)
            trTag.append(optionTag)
            tableBody.append(trTag);
        });
    }

    window.addEventListener('load', () => {
        renderStudentList();
    });

    
        
            
                id
                Name
                surname
                birthday
                Age
                gender
                Options

Select and add an event listener to an element inside a template literal string

2 Answers