当前位置： 文江博客话题详情

按钮未显示使用JS动态添加到页面

发布于 2025-01-26 19:11:59 字数 6201 浏览 2 评论 0原文 

function addElements(mailbox) {
  if (mailbox != 'sent') {
    let actionDivArchiveBtn = document.querySelector('#actions')
    let archiveButton = document.createElement("button");
    archiveButton.classList.add('archive');
    archiveButton.innerHTML = `<i class="fa fa-archive" 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 class="actions">
  <span class="action"><i class="fa fa-reply" aria-hidden="true"></i></span>
</div>
<div class="header">
  <span class="from">${email.sender}</span>
  <span class="date">
                            <span class="float-right"></span>${email.timestamp}</span>
</div>
<div class="title">${email.subject}</div>
<div class="description">${email.body}</div>

我正在创建一个像单页应用程序这样的gmail，我想使用vanilla javaScript动态创建一个存档按钮（该按钮未显示在我的屏幕上），我想收听用户使用事件侦听器单击“存档”按钮时，请检查如果档案是真实的，则使用put和更改为false，反之亦然。

我遇到的问题是我的按钮没有显示。

我不知道为什么，因为我已经检查了如何创建和附加按钮的类似示例，并采用了类似的过程。请帮助代码审核。


                        <div class="actions">
                            <span class="action"><i class="fa fa-reply" aria-hidden="true"></i></span>
                        </div>
                        <div class="header">
                            <span class="from">${email.sender}</span>
                            <span class="date">
                            <span class="float-right"></span>${email.timestamp}</span>
                        </div>
                        <div class="title">${email.subject}</div>
                        <div class="description">${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 class="fa fa-archive" 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 class="fa fa-archive" 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 class="actions">
  <span class="action"><i class="fa fa-reply" aria-hidden="true"></i></span>
</div>
<div class="header">
  <span class="from">${email.sender}</span>
  <span class="date">
                            <span class="float-right"></span>${email.timestamp}</span>
</div>
<div class="title">${email.subject}</div>
<div class="description">${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 class="fa fa-archive" 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 class="actions">
  <span class="action"><i class="fa fa-reply" aria-hidden="true"></i></span>
</div>
<div class="header">
  <span class="from">${email.sender}</span>
  <span class="date">
                            <span class="float-right"></span>${email.timestamp}</span>
</div>
<div class="title">${email.subject}</div>
<div class="description">${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 class="fa fa-archive" 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 class="actions">
  <span class="action"><i class="fa fa-reply" aria-hidden="true"></i></span>
</div>
<div class="header">
  <span class="from">${email.sender}</span>
  <span class="date">
                            <span class="float-right"></span>${email.timestamp}</span>
</div>
<div class="title">${email.subject}</div>
<div class="description">${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 class="actions">
                            <span class="action"><i class="fa fa-reply" aria-hidden="true"></i></span>
                        </div>
                        <div class="header">
                            <span class="from">${email.sender}</span>
                            <span class="date">
                            <span class="float-right"></span>${email.timestamp}</span>
                        </div>
                        <div class="title">${email.subject}</div>
                        <div class="description">${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 class="fa fa-archive" 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 class="fa fa-archive" 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 class="actions">
  <span class="action"><i class="fa fa-reply" aria-hidden="true"></i></span>
</div>
<div class="header">
  <span class="from">${email.sender}</span>
  <span class="date">
                            <span class="float-right"></span>${email.timestamp}</span>
</div>
<div class="title">${email.subject}</div>
<div class="description">${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 class="fa fa-archive" 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 class="actions">
  <span class="action"><i class="fa fa-reply" aria-hidden="true"></i></span>
</div>
<div class="header">
  <span class="from">${email.sender}</span>
  <span class="date">
                            <span class="float-right"></span>${email.timestamp}</span>
</div>
<div class="title">${email.subject}</div>
<div class="description">${email.body}</div>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

痴情 2025-02-02 19:11:59

您的QuerySelector actionDivarchiveBtn不正确。因为您是通过ID搜索的，但是在布局中，它是class，所以我在布局class中更改为 id，现在它作品。但是，您可能需要class在布局中，然后将＃更改为。。

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 class="fa fa-archive" 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 class="action"><i class="fa fa-reply" aria-hidden="true"></i></span>
</div>

<div class="header">
  <span class="from">${email.sender}</span>
  
  <span class="date">
    <span class="float-right"></span>${email.timestamp}
  </span>
</div>

<div class="title">${email.subject}</div>

<div class="description">${email.body}</div>

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 class="fa fa-archive" 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 class="action"><i class="fa fa-reply" aria-hidden="true"></i></span>
</div>

<div class="header">
  <span class="from">${email.sender}</span>
  
  <span class="date">
    <span class="float-right"></span>${email.timestamp}
  </span>
</div>

<div class="title">${email.subject}</div>

<div class="description">${email.body}</div>

回复 原文
~没有更多了~

关于作者

青春有你

暂无简介

文章
评论
27 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

櫻之舞

文章 0 评论 0

弥枳

文章 0 评论 0

m2429

文章 0 评论 0

寻找一个思念的角度

文章 0 评论 0

野却迷人

文章 0 评论 0

我怀念的。

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文