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>
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>