Как при клике по однотипным элементам делать их текстовое содержимое значением input'а?

Question

Mesuti @Mesuti

JavaScript

Как при клике по однотипным элементам делать их текстовое содержимое значением input'а?

Есть массив ссылок с одним классом и одно поле input:

<a href="#" class="link">Инфо1</a>
<a href="#" class="link">Инфо2</a>
<a href="#" class="link">Инфо3</a>
<a href="#" class="link">Инфо4</a>
<a href="#" class="link">Инфо5</a>

<input type="text" id="textLink" value="">

Как при клике на ссылку перенести ее текст внутрь input? На чистом js и максимально кратко.

Вопрос задан более трёх лет назад
745 просмотров

Комментировать

Подписаться 1 Простой Комментировать

Answer 1 · 2018-08-31 20:10:11

const input = document.querySelector('#textLink');
const buttonSelector = '.link';

Делегирование, назначаем обработчик клика один раз:

document.addEventListener('click', e => {
  const button = e.target.closest(buttonSelector);
  if (button) {
    input.value = button.innerText;
  }
});

Или, назначаем обработчик клика каждому элементу индивидуально:

document.querySelectorAll(buttonSelector).forEach(function(n) {
  n.addEventListener('click', this);
}, e => input.value = e.currentTarget.textContent);

Как при клике по однотипным элементам делать их текстовое содержимое значением input'а?

Войдите на сайт