时间戳

首页 > 解决方案 > 动态按钮事件和选择器连接无法正常工作

javascript - 动态按钮事件和选择器连接无法正常工作

问题描述

我想创建简单的 ToDo 应用程序，在其中插入一些文本并使用提交按钮提交。输入的文本应该在里面。那部分正在工作，我还想通过单击可以正常工作的相对删除按钮来删除项目。但是应该有最后一个行为，我想从编辑按钮编辑任何文本。当我单击编辑按钮时，提交按钮应替换为编辑按钮，将相关文本/字符串“复制”到输入中。为了提供更多信息，我们有两种类型的编辑按钮 - 1. 附加到插入的每个注释和 2. 一个全局编辑按钮，出现在我的输入和提交按钮的位置，负责提交编辑的文本。这是问题所在，在第一次尝试中，它在 .note 中获取字符串并放入输入中，当我提交时，它会更改完全相同的列表项。但是当我再次使用另一个列表项时，它也会更改第一个，如果您进一步更改第三个（另一个），它将与最后两个一起更改，依此类推。我试图将 editBtn 放在任何地方，它几乎改变了它的行为。现在我不确定如何将我的动态列表正确连接到 editBtn 以仅对我想要更改的项目进行适当的更改。我认为，这个问题是由于创建过程造成的，但我不确定我到底在哪里错过了正确的编码。

const submitBtn = document.querySelector('#submit');
const noteList = document.querySelector('.notes');
const clearAll = document.querySelector('#clearAll');
const itemDeletedInfo = document.querySelector('.itemDeleted');
const itemEditedInfo = document.querySelector('.itemEdited');
const allClearedInfo = document.querySelector('.allCleared');
const editBtn = document.querySelector('#edit')

clearAll.addEventListener('click', cl => {
    const noteList = document.querySelector('.notes');
    if (noteList.children.length === 0) {
        allClearedInfo.textContent = 'There is no any item in a list';
        infoMessage(allClearedInfo)
    } else {
        noteList.innerHTML = ''
        allClearedInfo.textContent = 'All items have been cleared';
        text.value = ''
        infoMessage(allClearedInfo)
    }
})


function infoMessage(message) {
    message.style.display = 'block'
    setTimeout(function () {
        message.style.display = 'none';
    }, 2000);
}


submitBtn.addEventListener('click', e => {
    const text = document.querySelector('#text');
    let value = text.value;
    if (value) {
        const newElem = document.createElement('li');
        newElem.innerHTML = `
            <span class='note'>${value}</span>
            <span class="btn-wrap">
              <button class="btn delete">delete</button>
              <button class="btn edit">edit</button>
            </span>
            `
        noteList.appendChild(newElem);
    }
    // text.value = '';
});

noteList.addEventListener('click', e => {
    if (e.target.classList.contains('delete')) {
        e.target.parentElement.parentElement.remove();
        infoMessage(itemDeletedInfo);
    } else if (e.target.classList.contains('edit')) {
        text.value = e.target.parentElement.parentElement.children[0].textContent;
        submitBtn.style.display = 'none';
        editBtn.style.display = 'inline-block';
    }
})

editBtn.addEventListener('click', function (editThis) {
    console.log(noteList);
    // e.target.parentElement.parentElement.children[0].textContent = text.value
    // console.log(e.target.parentElement.parentElement.children[0].textContent);
    submitBtn.style.display = 'inline-block';
    editBtn.style.display = 'none';
})
.wrapper{
  border:1px solid gray;
  width: 80vw;
  margin:0 auto;
  margin-top: 40px;
  text-align: center;
}
.info{
  display: none;
  color:white;
  border-radius: 10px;
  margin:10px;
  background-color: rgb(149, 228, 217);
}
.itemDeleted{
  background-color: red;
}
#edit{
  display: none;
}
.allCleared{
  background-color: royalblue;
  border:1px solid royalblue;
}
#clearAll{
  margin: 30px;
  color:royalblue;
}
.notes{
  display: flex;
  margin:20px;
  flex-direction: column;
  align-items: flex-start;
}
.notes li{
  display: flex;
  padding:5px;
  justify-content: space-between;
  width: 100%;
  border-top: 1px solid gray;
  
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Repeat session: Reviews</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
    integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
    crossorigin="anonymous" />
  <!-- STYLE -->
  <link rel="stylesheet" href="style/bc-ui.css">
  <link rel="stylesheet" href="style/main.css" />
  <!-- SCRIPT  -->

  <script src="scripts/app.js" defer></script>
</head>

<body>
  <div class="wrapper">
    <div class="info itemDeleted">Item has been removed</div>
    <div class="info itemEdited">Item has been edited</div>
    <div class="info allCleared"></div>


    <h1>Simple ToDo</h1>

    <input type="text" id="text" placeholder="write">
    <button class="btn" id="submit">submit</button>
    <button class="btn" id="edit">edit</button>
    <ul class="notes"></ul>
    <button id='clearAll' class="btn">clear all</button>

  </div>
</body>

</html>

预先感谢

标签： javascripthtmlcssbuttondynamic

解决方案

推荐阅读