Estoy tratando de crear un detector de eventos que use la solicitud PUT (Fetch) para cambiar un parámetro 'Archivo' a verdadero o falso cuando se hace clic en el ícono de fuente impresionante, sin embargo, no funciona (ni siquiera el registro de la consola se dispara).
¿Cómo puedo arreglar esto?
//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'); }); }ENLACE IMPRESIONANTE DE LA FUENTE
<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>Esto debería aclarar una declaración/definición de función frente a una llamada de función.
//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>