个人中心
gpt4 book ai didi

Javascript 没有选择后来通过 javascript 使用 innerHTML 添加的 html 元素

转载 作者：行者123 更新时间：2023-12-04 01:02:05 25 4
gpt4 key购买 nike

<分区>

我正在用 JS 创建一个待办事项列表。我附上了相同的代码片段。我在 html 中有三个硬编码的待办事项，每个待办事项都有两个关联的按钮('x' 删除待办事项 'y' 以将其标记为已完成)。现在对于这个硬编码的待办事项，一切正常。现在，要添加一个新的待办事项，我有这个 标签，其中输入了待办事项文本，单击回车后，我使用 innerHTML 将它们嵌入到 html 中，同时嵌入动态添加的待办事项在 DOM 中可见。但问题是与待办事项关联的按钮('x' 和 'y')没有按预期工作。此外，我尝试调试我的问题，我发现按钮('x' 和 'y')没有被选中。我不明白为什么会这样。任何帮助将不胜感激。

const todoInp = document.querySelector('.add input')
const todos = document.querySelector('.todos')


const remove = document.querySelectorAll('.remove')

const doneBtns = document.querySelectorAll('.check')

todoInp.addEventListener('keyup', (e) => {

  if (e.key === 'Enter' && e.target.value !== '') {
    const todoVal = e.target.value
    const todo = document.createElement('div')
    todo.classList.add('todo')

    todo.innerHTML = `
        <p>${todoVal}</p>
        <div class="buttons">
          <button class="remove">x</button>
          <button class="check">y</button>
        </div>
    `

    todos.appendChild(todo)

    todoInp.value = ''
  }
})






doneBtns.forEach((btn) => {
  btn.addEventListener('click', () => {
    const mainPar = btn.parentElement.parentElement
    mainPar.classList.toggle('done')
  })
})

remove.forEach((btn) => {
  btn.addEventListener('click', () => {
    const parent = btn.parentElement
    const mainPar = parent.parentElement
    mainPar.remove()
  })
})
* {
    box-sizing: border-box;
}
body {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 0;
    padding: 0;
    margin-top: 50px;
    height: 100vh;
    background-color: aliceblue;
}

.container{
    width: 600px;
    height: auto;
    padding: 50px;
}

.add,
.todos{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.add label{
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    color: darkblue;
}
.add input{
    background: white;
    padding: 13px;
    border: 0.5px solid #ccc;
    width: 90%;
    border-radius: 4px;
}

.add input:focus{
    outline: none;
}

.add input::placeholder{
    color:#ccc
}

.todo{
    color: darkblue;
    width: 90%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ccc;
}
.todo:last-child{
    border: 0
}

.todo p{
    font-size: 24px;
    font-weight: bold;
}

.buttons button{
    background-color: transparent;
    color: #aaa;
    border: 0;
    font-size: 24px;
    cursor: pointer;
    transition: all .5s ease-in-out;
}

.buttons button:hover{
    color:black;
}
.todo.done p{
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    color: orangered;
    text-decoration-style:double;
}
<div class="container">
  <div class="add">
    <label>ADD TODO</label>
    <input type="text" placeholder="Write your To do">
  </div>
  <div class="todos">
    <div class="todo">
      <p>Todo 1</p>
      <div class="buttons">
        <button class="remove">x</button>
        <button class="check">y</button>
      </div>
    </div>
    <div class="todo">
      <p>Todo 2</p>
      <div class="buttons">
        <button class="remove">x</button>
        <button class="check">y</button>
      </div>
    </div>
    <div class="todo">
      <p>Todo 3</p>
      <div class="buttons">
        <button class="remove">x</button>
        <button class="check">y</button>
      </div>
    </div>
  </div>
</div>

25 4 0
文章推荐： javascript - CSS 中的自动增长模态对话框不应超出屏幕
文章推荐： javascript - 如何对对象的 promise 值应用 `map` 操作？
文章推荐： c++ - 有效地删除字节数组中的低半字节 - C++
文章推荐： spring-boot - Netty 或任何其他非阻塞 IO 服务器上的 Logback MDC
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com