stackoom
  简体   繁体   中英

Javascript addEventListener only working on first element

 原文  2021-01-01 06:53:08  3   2    javascript/ addeventlistener

Question

I am doing notes app project but I am stuck at this point where addEventListener is only working for first element for edit button. The first element allows me to edit and save but the second only allows to edit but doesn't save as the first one. I am just a beginner, would really appreciate your help. I am have this have following code: 

 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 answers

solution1
 1 ACCPTED  2021-01-01 07:02:31

You need to add event listener again when you update the DOM

After you call document.body.appendChild(newNotesEl);, add event listener on edit class in newNotesEl . - 

document.body.appendChild(newNotesEl);

newNotesEl.querySelector('.edit').addEventListener("click", () => {
  console.log('Helll');
  main.classList.toggle("hidden");
  textArea.classList.toggle("hidden");
});

You can extract out the event code into a function, so you need not repeat code. 

 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>

solution2
 0  2021-01-01 07:05:38

You have to select all the element using querySelectorAll() and then use loop.

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Javascript = AddEventlistener only working on Chrome Javascript addEventListener on 3 links, only 1 working Javascript: addEventListener only working in setTimeout addeventlistener click only working on first click Javascript addEventListener only add a class to one element Javascript/CSS Lightbox only working for first element? JavaScript dynamic content working only on first element Javascript mouseover only working on first element addEventListener not working on first click addEventListener per element only
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM