почему выбирается первый блок?

Question

Делаю через делегирование, подойдет любой вариант. на странице есть контейнер и в контейнере 3 блока, в каждом блоке по одной кнопке, при нажатии на любую кнопку "редактировать" попадаю на первый блок.

const span = document.querySelector(".view"),
  btnVery = document.querySelectorAll(".very"),
  groupText1 = document.querySelector(".groupTextAll"),
  textarea = document.querySelector(".edit");
groupText1.addEventListener("click", function(event) {
  const btn = event.target.closest('button.very');
  if (!btn) return;
  span.classList.add("none");
  textarea.classList.remove("edit");
  textarea.value = span.innerHTML;
  span.after(textarea);
  textarea.focus();
});

body {
  background-color: #fbf2e9;
}

.group-btn {
  margin: 1em;
  display: flex;
  justify-content: space-between;
  gap: 1em;
}

.text-window {
  color: aliceblue;
  user-select: none;
}

button {
  user-select: none;
}

input {
  user-select: none;
}

.blockDnone {
  display: none;
}

.block {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0.9;
}

.block2 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.closeWindow {
  width: 5vw;
  height: 5vh;
  font-weight: 900;
  color: black;
}

.groupTextAll {
  margin: 1em 0em;
}

.group {
  margin: 1em;
  padding: .5em 1em;
  border: 2px solid gray;
  border-radius: 1em;
}

.text {
  color: gray;
}

.subject-btn {
  display: flex;
  justify-content: space-between;
}

.edit {
  display: none;
}

.none {
  display: none;
}

textarea {
  background-color: bisque;
  width: 100%;
  height: 150px;
}

.none {
  display: none;
}

<div class="groupTextAll">
  <div class="group-btn">
    <button class="delAll">Удалить все</button>
    <button class="add">Добавить новость</button>
  </div>
  <div class="group">
    <button class="very">редактировать</button>
    <h2 class="subject-btn">Заголовок<button class="del">удалить</button></h2>
    <span class="text view">
        text
      </span>
    <textarea name="text" class="edit-1 edit"></textarea>
  </div>
  <div class="group">
    <button class="very">редактировать</button>
    <h2 class="subject-btn">Заголовок<button class="del">удалить</button></h2>
    <span class="text view">
        text
      </span>
    <textarea name="text" class="edit-2 edit"></textarea>
  </div>
  <div class="group">
    <button class="very">редактировать</button>
    <h2 class="subject-btn">Заголовок <button class="del">удалить</button></h2>
    <span class="text view">
       text
      </span>
    <textarea name="text" class="edit-3 edit"></textarea>
  </div>

Изображение как выглядит:

Answer 1

Помимо const groupText1 = document.querySelector(".groupTextAll"); - остальное нужно получать в зависимости от event.target, для этого получить родителя:

const parent = event.target.closest('.group');

а от него уже - span, button, textarea и с ними уже проводить манипуляции.

const btn = parent.querySelector('button.very');
const span = parent.querySelector('.view');
const textarea = parent.querySelector('.edit');

const groupText1 = document.querySelector(".groupTextAll");

groupText1.addEventListener("click", function(event) {
  const parent = event.target.closest('.group');
  const btn = parent.querySelector('button.very');
  if (!btn) return;
  const span = parent.querySelector('.view');
  const textarea = parent.querySelector('.edit');
  span.classList.add("none");
  textarea.classList.remove("edit");
  textarea.value = span.innerHTML;
  // span.after(textarea);
  textarea.focus();
});

body {
  background-color: #fbf2e9;
}

.group-btn {
  margin: 1em;
  display: flex;
  justify-content: space-between;
  gap: 1em;
}

.text-window {
  color: aliceblue;
  user-select: none;
}

button {
  user-select: none;
}

input {
  user-select: none;
}

.blockDnone {
  display: none;
}

.block {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0.9;
}

.block2 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.closeWindow {
  width: 5vw;
  height: 5vh;
  font-weight: 900;
  color: black;
}

.groupTextAll {
  margin: 1em 0em;
}

.group {
  margin: 1em;
  padding: .5em 1em;
  border: 2px solid gray;
  border-radius: 1em;
}

.text {
  color: gray;
}

.subject-btn {
  display: flex;
  justify-content: space-between;
}

.edit {
  display: none;
}

.none {
  display: none;
}

textarea {
  background-color: bisque;
  width: 100%;
  height: 150px;
}

.none {
  display: none;
}

<div class="groupTextAll">
  <div class="group-btn">
    <button class="delAll">Удалить все</button>
    <button class="add">Добавить новость</button>
  </div>
  <div class="group">
    <button class="very">редактировать</button>
    <h2 class="subject-btn">Заголовок<button class="del">удалить</button></h2>
    <span class="text view">
        text1
      </span>
    <textarea name="text" class="edit-1 edit"></textarea>
  </div>
  <div class="group">
    <button class="very">редактировать</button>
    <h2 class="subject-btn">Заголовок<button class="del">удалить</button></h2>
    <span class="text view">
        text2
      </span>
    <textarea name="text" class="edit-2 edit"></textarea>
  </div>
  <div class="group">
    <button class="very">редактировать</button>
    <h2 class="subject-btn">Заголовок <button class="del">удалить</button></h2>
    <span class="text view">
       text3
      </span>
    <textarea name="text" class="edit-3 edit"></textarea>
  </div>

БЛОГ НА HUSL

почему выбирается первый блок?

Ответы (1 шт):