javascriptdom

How can I edit the div that is clicked when all other divs have the same className?

How can I access the div which is currently clicked, when all the divs have the same name? innerNote contains the text of each note. Each note is made up of a parent div and a child div (innerNote), which are created dynamically.

When I have multiple notes and click on the edit icon of a single note and save changes, all the notes get added with the same text. Is there a way I can edit the text of only the clicked div rather than all the divs?

let add_btn = document.querySelector('.add');
let container = document.querySelector('.container');
let createNote = document.querySelector('.create-note');
let create = document.querySelector('.create-btn');
let close = document.querySelector('.close-btn');
let text = '';
let editNote = document.querySelector('.edit-note');
let textArea = document.querySelector('textarea');
let closeBtn = document.querySelector('.close-btn2');
let editBtn = document.querySelector('.edit-btn');
let textArea2 = document.querySelector('.textarea2');

add_btn.addEventListener('click', () => {
  textArea.value = '';
  createNote.style.display = 'block';
})

close.addEventListener('click', () => {
  createNote.style.display = 'none';
})

create.addEventListener('click', () => {
  let note = document.createElement('div');
  note.className = 'note';
  
  let innerNote = document.createElement('div');
  innerNote.className = 'inner-note';
  text = textArea.value;
  innerNote.textContent = text;
  
  let edit = document.createElement('i');
  edit.className = 'fa-solid fa-edit';
  
  let del = document.createElement('i');
  del.className = 'fa-solid fa-trash';
  
  if (!textArea.value) {
    return;
  } else {
    note.appendChild(innerNote);
    note.appendChild(edit);
    note.appendChild(del);
    container.appendChild(note);
    createNote.style.display = 'none';
    note.style.display = 'block';
    edit.addEventListener('click', () => {
      textArea2.value = text;
      editNote.style.display = 'block';
    })
    
    editBtn.addEventListener('click', () => {
      let currentDiv = innerNote;
      currentDiv.textContent = textArea2.value;
      editNote.style.display = 'none';
    })
    
    del.addEventListener('click', () => {
      container.removeChild(note);
    })
  }
});

closeBtn.addEventListener('click', () => {
  editNote.style.display = 'none';
})
* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

body {
  background-color: #8c53ff;
  height: 94vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container {
  height: 600px;
  width: 890px;
  background-color: white;
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  overflow-y: auto;
}

.add {
  width: 237px;
  height: 241px;
  border: 1px solid #ddd;
  background-color: #f9f9f9;
  margin-left: 4%;
  margin-top: 3%;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 64px;
  color: gainsboro;
}

.add:hover {
  background-color: #f1f1f1;
}

.create-note {
  width: 441px;
  height: 316px;
  border: 1px solid #ccc;
  background-color: white;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  text-align: center;
  border-radius: 10px;
  position: absolute;
  top: 22%;
  left: 34%;
  display: none;
}

.heading {
  margin-top: 16px;
  font-size: 32px;
}

textarea {
  border: 2px solid #8c53ff;
  border-radius: 10px;
  width: 300px;
  height: 144px;
  margin-left: 5%;
  margin-top: 12px;
  padding: 10px;
}

.create-btn {
  width: 100px;
  height: 36px;
  margin-top: 18px;
  margin-left: 15px;
  background-color: #8c53ff;
  color: white;
}

.close-btn {
  width: 100px;
  height: 36px;
  background-color: gainsboro;
  color: white;
  margin-left: 10px;
}

.create-btn,
.close-btn {
  border: none;
  border-radius: 14px;
  font-size: 14px;
}

.note {
  background-color: #fff385;
  height: 240px;
  width: 240px;
  margin: 25px;
  border-radius: 10px;
  overflow-y: auto;
  display: none;
}

.inner-note {
  height: 190px;
  width: 190px;
  overflow-y: auto;
  margin-left: 32px;
  margin-top: 26px;
  word-break: break-all;
  word-spacing: 2px;
}

.fa-solid.fa-edit {
  margin-left: 94px;
}

.fa-solid.fa-trash {
  margin-left: 30px;
}

.edit-note {
  width: 441px;
  height: 316px;
  border: 1px solid #ccc;
  background-color: white;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  text-align: center;
  border-radius: 10px;
  position: absolute;
  top: 22%;
  left: 34%;
  display: none;
}

.edit-btn {
  width: 100px;
  height: 36px;
  margin-top: 18px;
  margin-left: 15px;
  background-color: #8c53ff;
  color: white;
  border: none;
  border-radius: 14px;
  font-size: 14px;
}

.close-btn2 {
  width: 100px;
  height: 36px;
  background-color: gainsboro;
  color: white;
  margin-left: 10px;
  border: none;
  border-radius: 14px;
  font-size: 14px;
}

@media only screen and (max-width: 600px) {
  .container {
    width: 375px;
    display: block;
  }

  .add {
    margin-left: 20%;
  }

  .create-note {
    left: 0%;
    width: 374px;
  }

  .note {
    margin-left: 70px;
    overflow-y: clip;
  }

  .inner-note {
    padding-top: 20px;
  }

  .fa-solid.fa-edit {
    padding-top: 10px;
  }
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<div class="container">
  <div class="add">
    <i class="fa-solid fa-plus"></i>
  </div>
  <div class="create-note">
    <h1 class="heading">New Note</h1>
    <textarea name="" id="" placeholder="Enter your note..."></textarea>
    <button class="create-btn">Create Note</button>
    <button class="close-btn">Close</button>
  </div>
  <div class="edit-note">
    <h1 class="heading">Edit Note</h1>
    <textarea name="" id="" class="textarea2"></textarea>
    <button class="edit-btn">Edit Note</button>
    <button class="close-btn2">Close</button>
  </div>
</div>

Solution

  • You need to delegate

    I had to comment out the container height to make the box visible in viewport

    let add_btn = document.querySelector('.add');
let container = document.querySelector('.container');
let createNote = document.querySelector('.create-note');
let create = document.querySelector('.create-btn');
let close = document.querySelector('.close-btn');
let text = '';
let editNote = document.querySelector('.edit-note');
let textArea = document.querySelector('textarea');
let closeBtn = document.querySelector('.close-btn2');
let editBtn = document.querySelector('.edit-btn');
let textArea2 = document.querySelector('.textarea2');

add_btn.addEventListener('click', () => {
  textArea.value = '';
  createNote.style.display = 'block';
})

close.addEventListener('click', () => {
  createNote.style.display = 'none';
})

create.addEventListener('click', () => {
  let note = document.createElement('div');
  note.className = 'note';

  let innerNote = document.createElement('div');
  innerNote.className = 'inner-note';
  text = textArea.value;
  innerNote.textContent = text;

  let edit = document.createElement('i');
  edit.className = 'fa-solid fa-edit';

  let del = document.createElement('i');
  del.className = 'fa-solid fa-trash';

  if (!textArea.value) {
    return;
  } else {
    note.appendChild(innerNote);
    note.appendChild(edit);
    note.appendChild(del);
    container.appendChild(note);
    createNote.style.display = 'none';
    note.style.display = 'block';
  }
});


editBtn.addEventListener('click', () => {
  currentDiv.textContent = textArea2.value;
  editNote.style.display = 'none';
})


container.addEventListener('click', (e) => {
  const tgt = e.target;
  if (!tgt | (!tgt.matches('.fa-edit') && !tgt.matches('.fa-trash'))) return;

  const parent = tgt.closest('div.note');
  if (tgt.matches('.fa-edit')) {
    currentDiv = parent.querySelector('.inner-note');
    textArea2.value = currentDiv.textContent;
    editNote.style.display = 'block';
  }
  if (tgt.matches('.fa-trash')) {
    container.removeChild(parent);
  }
})
closeBtn.addEventListener('click', () => {
  editNote.style.display = 'none';
})
    * {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

body {
  background-color: #8c53ff;
  height: 94vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container {
/*   height: 600px; */
  width: 890px;
  background-color: white;
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  overflow-y: auto;
}

.add {
  width: 237px;
  height: 241px;
  border: 1px solid #ddd;
  background-color: #f9f9f9;
  margin-left: 4%;
  margin-top: 3%;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 64px;
  color: gainsboro;
}

.add:hover {
  background-color: #f1f1f1;
}

.create-note {
  width: 441px;
  height: 316px;
  border: 1px solid #ccc;
  background-color: white;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  text-align: center;
  border-radius: 10px;
  position: absolute;
  top: 22%;
  left: 34%;
  display: none;
}

.heading {
  margin-top: 16px;
  font-size: 32px;
}

textarea {
  border: 2px solid #8c53ff;
  border-radius: 10px;
  width: 300px;
  height: 144px;
  margin-left: 5%;
  margin-top: 12px;
  padding: 10px;
}

.create-btn {
  width: 100px;
  height: 36px;
  margin-top: 18px;
  margin-left: 15px;
  background-color: #8c53ff;
  color: white;
}

.close-btn {
  width: 100px;
  height: 36px;
  background-color: gainsboro;
  color: white;
  margin-left: 10px;
}

.create-btn,
.close-btn {
  border: none;
  border-radius: 14px;
  font-size: 14px;
}

.note {
  background-color: #fff385;
  height: 240px;
  width: 240px;
  margin: 25px;
  border-radius: 10px;
  overflow-y: auto;
  display: none;
}

.inner-note {
  height: 190px;
  width: 190px;
  overflow-y: auto;
  margin-left: 32px;
  margin-top: 26px;
  word-break: break-all;
  word-spacing: 2px;
}

.fa-solid.fa-edit {
  margin-left: 94px;
}

.fa-solid.fa-trash {
  margin-left: 30px;
}

.edit-note {
  width: 441px;
  height: 316px;
  border: 1px solid #ccc;
  background-color: white;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  text-align: center;
  border-radius: 10px;
  position: absolute;
  top: 22%;
  left: 34%;
  display: none;
}

.edit-btn {
  width: 100px;
  height: 36px;
  margin-top: 18px;
  margin-left: 15px;
  background-color: #8c53ff;
  color: white;
  border: none;
  border-radius: 14px;
  font-size: 14px;
}

.close-btn2 {
  width: 100px;
  height: 36px;
  background-color: gainsboro;
  color: white;
  margin-left: 10px;
  border: none;
  border-radius: 14px;
  font-size: 14px;
}

@media only screen and (max-width: 600px) {
  .container {
    width: 375px;
    display: block;
  }

  .add {
    margin-left: 20%;
  }

  .create-note {
    left: 0%;
    width: 374px;
  }

  .note {
    margin-left: 70px;
    overflow-y: clip;
  }

  .inner-note {
    padding-top: 20px;
  }

  .fa-solid.fa-edit {
    padding-top: 10px;
  }
}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<div class="container">
  <div class="add">
    <i class="fa-solid fa-plus"></i>
  </div>
  <div class="create-note">
    <h1 class="heading">New Note</h1>
    <textarea name="" id="" placeholder="Enter your note..."></textarea>
    <button class="create-btn">Create Note</button>
    <button class="close-btn">Close</button>
  </div>
  <div class="edit-note">
    <h1 class="heading">Edit Note</h1>
    <textarea name="" id="" class="textarea2"></textarea>
    <button class="edit-btn">Edit Note</button>
    <button class="close-btn2">Close</button>
  </div>
</div>