Вставка в textarea значения по клику на кнопку

Question

Необходимо решение на нативном js. Имеется textarea, в которую, по клику на кнопку, должно вставляться её значение (каждое с новой строки):

<button data="0001">Add</button>
<button data="0002">Add</button>
<button data="0003">Add</button>

Результат в textarea:

Как реализовать подобное?

Answer 1

Можно сделать так. Находим кнопку по id и по клику в конец textarea добавляем текст

const textarea = document.getElementById('textarea');
const button1 = document.getElementById('button1');
const button2 = document.getElementById('button2');
const button3 = document.getElementById('button3');

button1.addEventListener('click', () => {
   textarea.value += "Текст 1\n";
});

button2.addEventListener('click', () => {
   textarea.value += "Текст 2\n";
});

button3.addEventListener('click', () => {
   textarea.value += "Текст 3\n";
});

<textarea id="textarea" rows="10" cols="50"></textarea>
<br>
<button id="button1">Текст 1</button>
<button id="button2">Текст 2</button>
<button id="button3">Текст 3</button>

Answer 2

Необходимо решение на нативном js. Имеется textarea, в которую, по клику на кнопку, должно вставляться её значение (каждое с новой строки):

Предложу такой вариант...

document.querySelector('section').addEventListener('click', e => {
  const o = e.target.closest('[data]')
  if (!o) return
  const ot = document.querySelector('textarea')
  const v = o.getAttribute('data')
  const t = ot.value ? '\n' : ''
  ot.value += t + v
})

<section>
  <button data="0001">Add</button>
  <button data="0002">Add</button>
  <button data="0003">Add</button>
</section>
<textarea></textarea>

БЛОГ НА HUSL

Вставка в textarea значения по клику на кнопку

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