Button not showing when using JS to dynamically add to page-CodePudding

function addElements(mailbox) {
  if (mailbox != 'sent') {
    let actionDivArchiveBtn = document.querySelector('#actions')
    let archiveButton = document.createElement("button");
    archiveButton.classList.add('archive');
    archiveButton.innerHTML = `<i  aria-hidden="true"></i>`
    actionDivArchiveBtn.appendChild(archiveButton);

    archiveButton.addEventListener('click', () => {
      if (email.archived === false) {
        actionDivArchiveBtn.style.color = "blue";
        fetch(`/emails/archive/${id}`, {
          method: 'PUT',
          body: JSON.stringify({
            archived: true
          })
        })
      } else {
        actionDivArchiveBtn.style.color = "black";
        fetch(`/emails/archive/${id}`, {
          method: 'PUT',
          body: JSON.stringify({
            archived: false
          })
        })
      }
    })
  }
  load_mailbox('inbox');
}

<div >
  <span ><i  aria-hidden="true"></i></span>
</div>
<div >
  <span >${email.sender}</span>
  <span >
                            <span ></span>${email.timestamp}</span>
</div>
<div >${email.subject}</div>
<div >${email.body}</div>

I am creating a gmail like single page application, I want to create an archive button dynamically using vanilla javascript (the button is not showing on my screen) and I want to listen to when the user clicks on the archive button using event listeners then check if archive is true using PUT and change to false and vice versa.

The problem I am having is that my button is not showing.

I don't know why because I've checked similar examples of how to to create and append buttons and similar process was taken. Please help with a code review.


                        <div >
                            <span ><i  aria-hidden="true"></i></span>
                        </div>
                        <div >
                            <span >${email.sender}</span>
                            <span >
                            <span ></span>${email.timestamp}</span>
                        </div>
                        <div >${email.subject}</div>
                        <div >${email.body}</div>


function addElements(mailbox) {
      if (mailbox != 'sent'){
        let actionDivArchiveBtn = document.querySelector('#actions')
        let archiveButton = document.createElement("button");
        archiveButton.classList.add('archive');
        archiveButton.innerHTML = `<i  aria-hidden="true"></i>`
        actionDivArchiveBtn.appendChild(archiveButton);

        archiveButton.addEventListener('click',() => {
          if (email.archived === false) {



function addElements(mailbox) {
  if (mailbox != 'sent') {
    let actionDivArchiveBtn = document.querySelector('#actions')
    let archiveButton = document.createElement("button");
    archiveButton.classList.add('archive');
    archiveButton.innerHTML = `<i  aria-hidden="true"></i>`
    actionDivArchiveBtn.appendChild(archiveButton);

    archiveButton.addEventListener('click', () => {
      if (email.archived === false) {
        actionDivArchiveBtn.style.color = "blue";
        fetch(`/emails/archive/${id}`, {
          method: 'PUT',
          body: JSON.stringify({
            archived: true
          })
        })
      } else {
        actionDivArchiveBtn.style.color = "black";
        fetch(`/emails/archive/${id}`, {
          method: 'PUT',
          body: JSON.stringify({
            archived: false
          })
        })
      }
    })
  }
  load_mailbox('inbox');
}
<div >
  <span ><i  aria-hidden="true"></i></span>
</div>
<div >
  <span >${email.sender}</span>
  <span >
                            <span ></span>${email.timestamp}</span>
</div>
<div >${email.subject}</div>
<div >${email.body}</div>






function addElements(mailbox) {
  if (mailbox != 'sent') {
    let actionDivArchiveBtn = document.querySelector('#actions')
    let archiveButton = document.createElement("button");
    archiveButton.classList.add('archive');
    archiveButton.innerHTML = `<i  aria-hidden="true"></i>`
    actionDivArchiveBtn.appendChild(archiveButton);

    archiveButton.addEventListener('click', () => {
      if (email.archived === false) {
        actionDivArchiveBtn.style.color = "blue";
        fetch(`/emails/archive/${id}`, {
          method: 'PUT',
          body: JSON.stringify({
            archived: true
          })
        })
      } else {
        actionDivArchiveBtn.style.color = "black";
        fetch(`/emails/archive/${id}`, {
          method: 'PUT',
          body: JSON.stringify({
            archived: false
          })
        })
      }
    })
  }
  load_mailbox('inbox');
}
<div >
  <span ><i  aria-hidden="true"></i></span>
</div>
<div >
  <span >${email.sender}</span>
  <span >
                            <span ></span>${email.timestamp}</span>
</div>
<div >${email.subject}</div>
<div >${email.body}</div>

CodePudding user response：

Your querySelector for actionDivArchiveBtn is incorrect. Because you search by id but in layout it is class so I changed in layout class to id and now it works. But may be you need class in layout then change # to . in querySelector:

function load_mailbox(string) {
  console.log(string);
}

function addElements(mailbox) {
  if (mailbox != 'sent') {
    let actionDivArchiveBtn = document.querySelector('#actions')
    let archiveButton = document.createElement("button");
    archiveButton.classList.add('archive');
    archiveButton.innerHTML = `SOME TEXT<i  aria-hidden="true"></i>`
    actionDivArchiveBtn.appendChild(archiveButton);

    archiveButton.addEventListener('click', () => {
      if (email.archived === false) {
        actionDivArchiveBtn.style.color = "blue";
        fetch(`/emails/archive/${id}`, {
          method: 'PUT',
          body: JSON.stringify({
            archived: true
          })
        })
      } else {
        actionDivArchiveBtn.style.color = "black";
        fetch(`/emails/archive/${id}`, {
          method: 'PUT',
          body: JSON.stringify({
            archived: false
          })
        })
      }
    })
  }
  load_mailbox('inbox');
}

addElements('receive');

<div id="actions">
  <span ><i  aria-hidden="true"></i></span>
</div>

<div >
  <span >${email.sender}</span>
  
  <span >
    <span ></span>${email.timestamp}
  </span>
</div>

<div >${email.subject}</div>

<div >${email.body}</div>