0

I am trying to create an event listener that uses PUT request (Fetch) to change a parameter 'Archive' to true or false when the font-awesome icon is clicked however, it's not working (not even the console log is being fired).

How can I fix this?

//create function to confirm if email is archived (INBOX ONLY)
function confirmArchiveStatus() {
  let archiveBtn = document.querySelector('.archive')
  //ADDeventlistener for click to archive button
  archiveBtn.addEventListener('click', function() {
    //just testing if this fired 
    console.log('archived: true');
    //use put request to mark email as achived
    fetch(`/emails/inbox/${id}`, {
      method: 'PUT',
      body: JSON.stringify({
          archived: true,        
      })
    })
    //Load inbox to refresh archived mails out 
    load_mailbox('inbox');
  });

    archiveBtn.addEventListener('click', function() {
    console.log('archived: false');
      //if archive is true, add event listener click to remove from archived mails
        if(email.archived != true) {
          fetch(`/emails/archive/${id}`, {
            method: 'PUT',
            body: JSON.stringify({
                archived: false,
            })
          })
      }
    //Load inbox to refresh archived mails in 
    load_mailbox('inbox');
  });
}

FONT AWESOME LINK

        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

HTML

                    <div class="actions">
                        <span class="action archive"><i class="fa fa-archive"></i></span>
Chuks
  • 59
  • 8
  • You declare `confirmArchiveStatus()` , but I don't see an actual call to set up the listeners – fnostro May 02 '22 at 18:40
  • @fnostro, I don't understand. I'm still new to JS. Please explain a bit more or any resource I can look up – Chuks May 02 '22 at 19:01
  • 1
    I've clarified my comment below. As far as resources, [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide) is pretty much *the* goto for javascript, and for you in particular: [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions) – fnostro May 02 '22 at 19:12

1 Answers1

1

This should clarify a function declaration/definition versus a function call.

//create function to confirm if email is archived (INBOX ONLY)
// THIS IS A FUNCTION DECLARATION that sets up an event listener (twice, 
// not sure you want to do this twice) but these event listeners
// are NEVER actually set until...(see below):

function confirmArchiveStatus() {
  let archiveBtn = document.querySelector('.archive');

  //ADDeventlistener for click to archive button
  archiveBtn.addEventListener('click', function() {
    console.log('archived: true');
  });

  archiveBtn.addEventListener('click', function() {
    console.log('archived: false');
  });
}


//THIS IS A FUNCTION CALL:
confirmArchiveStatus();
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="actions">
  <span class="action archive"><i class="fa fa-archive"></i></span>
</div>
fnostro
  • 4,531
  • 1
  • 15
  • 23
  • Thank you. I tried your code on my end but it is giving me this error ' TypeError: Cannot read properties of null (reading 'addEventListener') at confirmArchiveStatus' I tried editing to window.onload=function() from this resource https://stackoverflow.com/questions/70075733/i-get-the-uncaught-typeerror-cannot-read-properties-of-null-reading-addevent but didn't work (more errors). – Chuks May 02 '22 at 19:20
  • 1
    This snippet is intended to show you that you were not actually setting any event listeners. StackOverflow does a number of amazing things to get these snippets to execute properly, so I can't speak to how your implementing the above. – fnostro May 02 '22 at 19:40