Допустим у меня есть большой список:
Заголовок 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>