font awesome 图标对事件侦听器没有反应 Javascript

Question

我正在尝试创建一个事件侦听器，它使用 PUT 请求（获取）将参数 'Archive' 更改为 true 或 false，当单击超赞字体图标时，它不起作用（甚至正在触发控制台日志）。

我该如何解决这个问题？

//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');
  });
}

字体很棒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>

Answer 1

这应该阐明函数 declaration/definition 与函数调用。

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

font awesome 图标对事件侦听器没有反应 Javascript

font awesome icon not reacting to event listener Javascript

javascript

font-awesome