addEventListener to innerHTML

Question

I am new to Javascript and I try to add an event listener for each button on every card, but the code make the last card (button) only have the event 'click' so is there's any way to make it happen with innerHTML card this is the code:

let tracksRender = (track) => {

track.forEach(element => {

    //this the card that will add the button for
    let card = `
    
        
    
        
            
                ${element.title}
            
        
`;
    
    //here i add the card to DOM
    let searchResults = document.querySelector('.js-search-results');
    searchResults.innerHTML += card;

    // store the content of the button 
    let inBtn = `
    Add to playlist`;
 
    // created button container 
    let btn = document.createElement("div");
    btn.classList.add("ui", "bottom", "attached", "button", "js-button");

    // added the content of the button 
    btn.innerHTML += inBtn;
    
    // here i add the the event Listener to the button 
    btn.addEventListener('click', () => {
        console.log("click");
    });

    //here i add the button to the last card have been created
    searchResults.querySelector(".card:last-child").append(btn);
    
});
}

and the structure:





    
    
    SoundCloud Player

Fiddle: https://jsfiddle.net/y73bstju/7/

but it will add the event to the last card only

user_6933004 · Answer

It might help to create elements instead of appending innerHTML:

let tracksRender = (track) => {
    
  // Select the results here, so you wont have to repeat it
  const searchResults = document.querySelector('.js-search-results');

  track.forEach(element => {

    // Create the card, give it its class and innerHTML
    const card = document.createElement('div');
    card.className = 'card';
    card.innerHTML = `
                          
                      
                      
                          
                              ${element.title}
                          
                     `;
 
    // Created the button, give its classes and innerHTML
    const btn = document.createElement('div');
    btn.className = 'ui bottom attached button js-button';
    btn.innerHTML = 'Add to playlist';
    
    // Add the event listener
    btn.addEventListener('click', () => {
        console.log('click');
    });

    // Append the button to the created card
    card.appendChild(btn);

    // Add the card to the results
    searchResults.appendChild(card);
    
  });

}

user_436560 · Answer

I agree with you that theoretically the object should have the event, but the behavior we experience is that whenever another write happens at the relevant section of the DOM, the event handler is lost, which is the reason the last element has the click event. So, let's write first into the DOM and only when we are done with that should we add the event listeners, like:

let SoundCloudAPI = {};
SoundCloudAPI.init = () => {
    SC.initialize({ client_id: 'cd9be64eeb32d1741c17cb39e41d254d' });
};
SoundCloudAPI.init();


SoundCloudAPI.getTrack = (inputVlue) => {
    SC.get('/tracks', {
        q: inputVlue
    }).then((tracks) => {
            console.log(tracks);
        SoundCloudAPI.renderTracks(tracks);
    });
}
SoundCloudAPI.getTrack("alan walker");

SoundCloudAPI.renderTracks = (track) => {

        track.forEach(element => {

    //this the card that will add the button for
    let card = `
    
        
    
        
            
                ${element.title}
            
        
`;
    
    //here i add the card to DOM
    let searchResults = document.querySelector('.js-search-results');
    searchResults.innerHTML += card;

    // store the content of the button 
    let inBtn = `
    Add to playlist`;
 
    // created button container 
    let btn = document.createElement("div");
    btn.classList.add("ui", "bottom", "attached", "button", "js-button", "fresh");

    // added the content of the button 
    btn.innerHTML += inBtn;
    

    //here i add the button to the last card have been created
    searchResults.querySelector(".card:last-child").append(btn);
    });
    for (let btn of document.querySelectorAll('.ui.attached.button.js-button.fresh')) {
        // here i add the the event Listener to the button 
        btn.addEventListener('click', () => {
            console.log("click");
        });
    }
}

Fiddle: https://jsfiddle.net/r84um9pt/

user_9611944 · Answer

I think: you're doing:

let searchResults = document.querySelector('.js-search-results');
searchResults.innerHTML += card;

Serializing again and again in your div "searchResults"

innerHTML ~erases~ listeners, and probably it is ~erasing~ your previous listeners. Besides, i don't remember where i read that innerHTML script code cannot run (for security purposes)

From https://medium.com/@kevinchi118/innerhtml-vs-createelement-appendchild-3da39275a694

using innerHTML reparses and recreates all DOM nodes inside the div element and is less efficient than simply appending a new element to the div. In the above cases, createElement is the more performant choice.

Be careful:

Using "append" again and again uses badly browser resources, redrawing many times. But, you can append in a documentFragment and append it to the div -js-search-results

DocumentFragment: https://developer.mozilla.org/es/docs/Web/API/DocumentFragment

user_13922040 · Answer

Welcome in the community. In you're code you're adding many classes to button. You can add event Listener to any one of the unique class name which is specifically applied on button element only.

You can replace:

btn.addEventListener('click', () => {
    console.log('click');
});

with:

document.querySelectorAll('.js-button').forEach(el=>{
  el.addEventListener('click', (event) => {
  event.preventDefault();
  console.log("click");
 });
});

Also, it would be good if you add eventListener out of the loop in which you are appending elements.

addEventListener to innerHTML

4 Answers