Как загрузить список в html и выборочно из списка добавить в textarea?

Question

Допустим у меня есть большой список:

Заголовок 1

Заголовок 2

Заголовок 3

...

Заголовок 50

Его нужно вставить в textarea и весь список вывести во "Все заголовки"

Далее, при нажатии на заголовок из списка, заголовок должен переноситься в textarea2, то есть готовый вариант

Я здесь добавление в textarea2 добавлять научился, но как список пополнить новыми заголовками я не знаю

// Получить все элементы предложения
const offer = document.querySelectorAll('.offer');

// Получить элемент textarea
const textarea = document.querySelector('textarea');

// Добавляем прослушиватель кликов к каждому элементу предложения
offer.forEach((offer) => {
  offer.addEventListener('click', (event) => {
    // Добавляем содержимое предложения в текстовое поле
    textarea.value += event.target.textContent + '\n';
  });
});

.content1 {
  width: 48%;
  margin: 10px;
  float: left
}

.content1 textarea {
  background: #fff
}

.offer {
  padding: 3px 10px;
  cursor: pointer
}

.offer:hover {
  background: #ddd;
}

<div class="content">
  <div class="">
    <h3>Вставьте список заголовков (каждый заголовок с новой строки):</h3>
  </div>
  <textarea id="id_textarea" rows="5" cols="85"></textarea> <br />
  <button>Добавить весь список во "Все заголовки"</button>
</div>
<div class="content1">
  <h3>Все заголовки (кликни по заголовку, он добавится в поле справа) </h3>
  <div class="offer">Привет мир</div>
  <div class="offer">Проверка связи</div>
  <div class="offer">Чистка свитера</div>
  <div class="offer">Ну что, получилось?</div>
</div>
<div class="content1">
  <textarea id="id_textarea" rows="5" cols="85"></textarea>
  <br />
  <button>Копировать весь список с переносами</button>
</div>
</div>

Answer 1

Судя по разметке и описаниям кнопок и заголовков, я понял логику так:

// Находим блок с заголовками
const order = document.querySelector(".order");

/* Обработчик нажатия кнопки Добавить весь список во "Все заголовки" */
button_add.addEventListener("click", (ev) => {
  // Преобразуем текст в иходном текстовом поле в массив строк (пунктов списка)
  let items = textarea_source.value.replace(/\s+\n/g, '\n').trim().split('\n');
  // Перебираем массив строк
  items.forEach((item) => {
    // Вставляем новый пункт с текущей строкой в конец блока с заголовками
    order.insertAdjacentHTML("beforeend", `<div class="offer">${item}</div>`);
  });
});

/* Обработчик событий в блоке с заголовками */
order.addEventListener("click", (ev) => {
  // Если нажатие не на пункт списка, то отменяем дальнейшую обработку
  if (!ev.target.classList.contains("offer")) return;
  // Добавляем содержимое пункт списка в целевое текстовое поле в позицию курсора
  let curPos = textarea_target.selectionStart;
  textarea_target.value = textarea_target.value.substring(0, curPos) + ev.target.textContent + "\n" + textarea_target.value.substring(curPos);
});

/* Обработчик нажатия кнопки Копировать весь список с переносами */
button_copy.addEventListener("click", (ev) => {
  // Копируем текст из целевого текстового поля в буфер обмена
  navigator.clipboard.writeText(textarea_target.value);
});

.content1 { width: 48%; margin: 10px; float: left; }
.content1 textarea { background: #fff; }
.offer { padding: 3px 10px; cursor: pointer; }
.offer:hover { background: #ddd; }

<div class="content input">
  <div class="">
    <h3>Вставьте список заголовков (каждый заголовок с новой строки):</h3>
  </div>
  <textarea id="textarea_source" rows="5" cols="85">Привет мир
Проверка связи
Чистка свитера
Ну что, получилось?</textarea><br>
  <button id="button_add">Добавить весь список во "Все заголовки"</button>
</div>
<div class="content1 order">
  <h3>Все заголовки (кликни по заголовку, он добавится в поле справа)</h3>
</div>
<div class="content1 output">
  <textarea id="textarea_target" rows="5" cols="85"></textarea><br>
  <button id="button_copy">Копировать весь список с переносами</button>
</div>

БЛОГ НА HUSL

Как загрузить список в html и выборочно из списка добавить в textarea?

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