Javascript addEventListener 仅适用于第一个元素
[英]Javascript addEventListener only working on first element
问题描述
我正在做笔记应用程序项目，但我被困在 addEventListener 仅适用于编辑按钮的第一个元素的这一点上。 第一个元素允许我编辑和保存，但第二个元素只允许编辑但不保存为第一个元素。 我只是一个初学者，非常感谢你的帮助。 我有这个有以下代码：
const notesEl = document.querySelector(".notes"); const editBtn = document.querySelector(".edit"); const deleteBtn = document.querySelector(".delete"); const addNoteBtn = document.querySelector(".add-note"); const main = notesEl.querySelector(".main"); const textArea = notesEl.querySelector("textarea"); editBtn.addEventListener("click", () => { console.log('Helll'); main.classList.toggle("hidden"); textArea.classList.toggle("hidden"); }); textArea.addEventListener("input", (e) => { const { value } = e.target; main.innerHTML = marked(value); }); addNoteBtn.addEventListener("click", () => { const newNotesEl = document.createElement("div"); newNotesEl.classList.add("notes"); newNotesEl.innerHTML = ` <div class="notes-tools"> <button class="edit"><i class="fas fa-edit"></i></button> <button class="delete"><i class="fas fa-trash-alt"></i></button> </div> <div class="main hidden"></div> <textarea></textarea> `; document.body.appendChild(newNotesEl); });
body { background-color: #7bdaf3; display: flex; flex-wrap: wrap; font-family: "Poppins",sans-serif; min-height: 100vh; margin: 0; }.add-note { background-color: #9ec862; color: #fff; position: fixed; top: 1rem; right: 1rem; border: none; padding: 0.5rem; border-radius: 4px; font-size: 1.2rem; }.add-icon { margin-left: 4px; }.notes { background-color: #fff; width: 380px; height: 400px; margin: 60px 20px; }.notes.notes-tools { background-color: #9ec862; display: flex; justify-content: flex-end; padding: 0.5rem; }.notes.notes-tools button { background-color: transparent; color: #fff; border: none; font-size: 1rem; margin-left: 0.5rem; }.notes.main { height: 100%; width: 100%; }.notes textarea { outline: none; font-family: inherit; border: none; height: 100%; width: 100%; }.notes.hidden { display: none; }
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/1.2.7/marked.min.js"></script> <body> <button class="add-note">Add Note<i class="far fa-plus-square add-icon"></i></button> <div class="notes"> <div class="notes-tools"> <button class="edit"><i class="fas fa-edit"></i></button> <button class="delete"><i class="fas fa-trash-alt"></i></button> </div> <div class="main hidden"></div> <textarea></textarea> </div> </body>
2 个解决方案
解决方案1
1 已采纳 2021-01-01 07:02:31
更新DOM时需要再次添加事件监听器
在你调用document.body.appendChild(newNotesEl);之后 ，在newNotesEl中edit class 时添加事件监听器。 -
document.body.appendChild(newNotesEl);
newNotesEl.querySelector('.edit').addEventListener("click", () => {
console.log('Helll');
main.classList.toggle("hidden");
textArea.classList.toggle("hidden");
});
您可以将事件代码提取到 function 中，因此您无需重复代码。
const notesEl = document.querySelector(".notes"); const editBtn = document.querySelector(".edit"); const deleteBtn = document.querySelector(".delete"); const addNoteBtn = document.querySelector(".add-note"); const main = notesEl.querySelector(".main"); const textArea = notesEl.querySelector("textarea"); editBtn.addEventListener("click", () => { console.log('Helll'); main.classList.toggle("hidden"); textArea.classList.toggle("hidden"); }); textArea.addEventListener("input", (e) => { const { value } = e.target; main.innerHTML = marked(value); }); addNoteBtn.addEventListener("click", () => { const newNotesEl = document.createElement("div"); newNotesEl.classList.add("notes"); newNotesEl.innerHTML = ` <div class="notes-tools"> <button class="edit"><i class="fas fa-edit"></i></button> <button class="delete"><i class="fas fa-trash-alt"></i></button> </div> <div class="main hidden"></div> <textarea></textarea> `; document.body.appendChild(newNotesEl); newNotesEl.querySelector('.edit').addEventListener("click", () => { console.log('Helll'); main.classList.toggle("hidden"); textArea.classList.toggle("hidden"); }); });
body { background-color: #7bdaf3; display: flex; flex-wrap: wrap; font-family: "Poppins", sans-serif; min-height: 100vh; margin: 0; }.add-note { background-color: #9ec862; color: #fff; position: fixed; top: 1rem; right: 1rem; border: none; padding: 0.5rem; border-radius: 4px; font-size: 1.2rem; }.add-icon { margin-left: 4px; }.notes { background-color: #fff; width: 380px; height: 400px; margin: 60px 20px; }.notes.notes-tools { background-color: #9ec862; display: flex; justify-content: flex-end; padding: 0.5rem; }.notes.notes-tools button { background-color: transparent; color: #fff; border: none; font-size: 1rem; margin-left: 0.5rem; }.notes.main { height: 100%; width: 100%; }.notes textarea { outline: none; font-family: inherit; border: none; height: 100%; width: 100%; }.notes.hidden { display: none; }
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/1.2.7/marked.min.js"></script> <body> <button class="add-note">Add Note<i class="far fa-plus-square add-icon"></i></button> <div class="notes"> <div class="notes-tools"> <button class="edit"><i class="fas fa-edit"></i></button> <button class="delete"><i class="fas fa-trash-alt"></i></button> </div> <div class="main hidden"></div> <textarea></textarea> </div> </body>
解决方案2
0 2021-01-01 07:05:38
您必须使用 querySelectorAll() select 所有元素，然后使用循环。
Javascript：addEventListener仅在setTimeout中工作
[英]Javascript: addEventListener only working in setTimeout
Javascript addEventListener 仅将 class 添加到一个元素
[英]Javascript addEventListener only add a class to one element
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
Javascript = AddEventlistener仅适用于Chrome
3个链接上的Javascript addEventListener，仅1个有效
Javascript：addEventListener仅在setTimeout中工作
addeventlistener仅在首次点击时起作用
Javascript addEventListener 仅将 class 添加到一个元素
Javascript/CSS 灯箱仅适用于第一个元素？
JavaScript动态内容仅在第一个元素上起作用
Javascript mouseover仅在第一个元素上起作用
addEventListener 在第一次点击时不起作用
仅每个元素的addEventListener
相关标签