Javascript addEventListener not working in some instances but does work in others

Question

Relatively new to Javascript so this might be something completely obvious that I'm overlooking.

I have a very simple HTML page, basically just an empty <div> with id="ind-email-view" .

I'm trying to create two buttons, one called reply and one called archive , then use addEventListener to run a function on 'click' for both buttons.

I'm using the same code for both buttons, but the Reply button I can't get to do anything. What am I missing here?

 // Create reply button, append to div, addEventListener var reply = document.createElement('button'); reply.innerHTML = "Reply"; document.querySelector('#ind-email-view').appendChild(reply); reply.addEventListener('click', () => { console.log('button clicked') }); // Create archive button, append to div, addEventListener var archive = document.createElement('button'); archive.innerHTML = "Archive"; document.querySelector('#ind-email-view').appendChild(archive) archive.addEventListener('click', () => { archive_email(email); });

 <div id="ind-email-view"></div>

archive_email() is a function I've created, but it's irrelevant here because the archive button works just fine.

I can't even get the reply button to log a message to the console. Literally nothing happens when I click.

What am I missing here?

EDIT - Sorry, I should have included the entire code, thanks for the suggestion @epascarello. Here is the full javascript that those snippets are from. Hopefully this is enough to pinpoint the issue!

The fetch() functions make an API call. Both of those are working fine as well. (This is for a class-project...the API part has been created by the instructor so there shouldn't be any issues there).

function get_email(email_id) {
    // clear out the HTML of the ind-email-view div to get rid of any 
        prior email 
    document.querySelector('#ind-email-view').innerHTML = '';

    // Make API call to get the email details
    fetch(`/emails/${email_id}`)
    .then(response => response.json())
    .then(email => {

        // Make API call to mark email as read
        fetch(`/emails/${email.id}`, {
            method: 'PUT',
            body: JSON.stringify({
                read: true
            })
        });

        // Get the email's details from the API call and add them to <div>'s innerHTML
        document.querySelector('#ind-email-view').innerHTML += `<b>From: </b>${email.sender}<br>`;
        document.querySelector('#ind-email-view').innerHTML += `<b>To: </b>${email.recipients}<br>`;
        document.querySelector('#ind-email-view').innerHTML += `<b>Subject: </b>${email.subject}<br>`;
        document.querySelector('#ind-email-view').innerHTML += `<b>Timestamp: </b>${email.timestamp}<br><hr>`;

        // Create reply button
        var reply = document.createElement('button');
        reply.innerHTML = "Reply";
        document.querySelector('#ind-email-view').appendChild(reply);
        reply.addEventListener('click', () => {
            // >>This will get replaced with another function, but I can't even get the console.log() to work on click
            console.log('button clicked')
        });
  
        // display email body
        document.querySelector('#ind-email-view').innerHTML += `<br> <br>${email.body}<br><br>`;

        // Create button to archive emails
        var archive = document.createElement('button');
        archive.innerHTML = "Archive";
        document.querySelector('#ind-email-view').appendChild(archive)
        archive.addEventListener('click', () => {
          archive_email(email);    
        });     
    });
}

Answer 1

When you do

document.querySelector('#ind-email-view').innerHTML += `<br> <br>${email.body}<br><br>`;

It removes the event listener. innerHTML redraws all the DOM in the element.