¿Cómo puedo editar el div que se hace clic cuando todos los demás divs tienen el mismo className?

Cómo editar un div específico al hacer clic cuando todos los divs tienen el mismo className

En el desarrollo de aplicaciones web, puede surgir la necesidad de interactuar con múltiples elementos que comparten las mismas características, como el className. En este caso, se trata de un sistema de notas donde al hacer clic en un icono de edición, se desea modificar el contenido de una única nota en lugar de todas las notas simultáneamente. A continuación, se presenta una solución para este problema.

Problema

Al clicar en el ícono de edición de una nota específica, el contenido del área de texto (textarea) se asigna a todas las notas, ya que se accede al valor de la última nota creada. Esto se debe a que todas las notas se gestionan con un addEventListener que no está adecuadamente vinculado al div específico correspondiente.

Solución

Para solucionar este problema, se debe modificar el código de forma que se haga referencia al div que fue clicado en el momento correcto. En la sección de creación de notas, hay que almacenar una referencia a cada innerNote y utilizarla en el evento click del botón de edición. Aquí está el código corregido:

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 = innerNote.textContent; // Cambiar esto para usar el texto correcto
      editNote.style.display = 'block';

      // Guardar la referencia al innerNote actual
      editBtn.onclick = () => {
        innerNote.textContent = textArea2.value; // Usar la referencia guardada
        editNote.style.display = 'none';
      };
    });

    del.addEventListener('click', () => {
      container.removeChild(note);
    });
  }
});

closeBtn.addEventListener('click', () => {
  editNote.style.display = 'none';
});

Resumen

Con esta corrección, se asegura que cuando se hace clic en el icono de edición de una sola nota, se accede directamente al contenido de esa nota específica. Almacenar la referencia al innerNote dentro del evento del botón de edición es clave para que los cambios se apliquen correctamente solo a la nota deseada. Esto optimiza su funcionamiento y mejora la experiencia del usuario al interactuar con varias notas al mismo tiempo.