0

I have this dynamically created button that works fine and the innerHTML looks like this:

inboxEmail.innerHTML = `
<strong>${email.sender}</strong><br>
  ${email.subject}<br>
  ${email.body}        
`;

This functions just as I expect it to. I wanted to change the way text was displayed inside the button which I managed to do successfully by changing the innerHTML to this:

        inboxEmail.innerHTML = `
        <div class="container">
          <div class="row">
            <div class="col-10">
            <strong>${email.sender}</strong><br>
            ${email.subject}<br>   
            ${email.body}   
            </div>
            <div class="col-2">
              ${email.timestamp} 
            </div>
          </div>
        </div>
        `;

Now this button is not functioning at all. This is the onclick function:

  document.querySelector('#emails-view').addEventListener('click', function(e) {
    if(e.target && e.target.nodeName == 'BUTTON' && isNaN(e.target.id) === false) {
        alert(e.target.id);
        emailSelect(e.target.id);
      } else {
        console.log('error')
        return false;
      }
  })

Instead the 'error' is showing on the console. I have not touched the inboxEmail.id only the innerHTML so why isn't it working?

EDIT: This is my "emails-view" copied from my Inspect Element on the page:

<div id="emails-view" style="display: block;"><h3>Inbox</h3>
<div class="list-group">
  <button class="list-group-item list-group-item-secondary list-group-item-action" id="7">
        <div class="row">
        <div class="col-10">
        <strong>monday@example.com</strong><br>
        RE: very important<br>   
        Hi 

I hope y...   
        </div>
        <div class="col-2">
        Oct 16 2020, 08:13 PM 
        </div>
        </div>
        
        </button></div></div>
sarchi-xo
  • 242
  • 2
  • 15
  • 1
    Could you please add html code that contains a `button` and `#emails-view`? – Alexander Oct 24 '20 at 12:15
  • You replaced the button with the event handler on it with a new one. – Quentin Oct 24 '20 at 12:15
  • @Alexander I have added as requested – sarchi-xo Oct 24 '20 at 12:23
  • @Fee-fi-fo-fum yes I tried clicking the corner of the button like you said and it worked fine. I'm trying to add the event listener directly to the button using class but it keeps saying `Cannot read property 'addEventListener' of null`. So this is what I am now stuck on. When I just querySelector in the console.log it finds the button just fine. I've put this onclick function within 'DOMContentLoaded' so I am really unsure what is going on. I will probably have to keep the button as it was originally and that's unfortunate. – sarchi-xo Oct 24 '20 at 13:32
  • @sarchi-xo Try what you did originally, but add `pointer-events: none;` to the first child of your button:
    . https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
     –  Oct 24 '20 at 14:46
  • @Fee-fi-fo-fum Thank you so much, this has worked! I didn't want to take any chances so I did add the `style="pointer-events: none;"` to row and col-10 and col-2 and that solved it. Grateful. – sarchi-xo Oct 24 '20 at 15:52

0 Answers0