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

Question

[Mesuti]

Есть массив ссылок с одним классом и одно поле 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 и максимально кратко.

Answer 1

[0xD34F]

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);

Answer 2

[unsxxndxrk]

var links = document.getElementsByClassName('link');
var input = document.getElementById('textLink);

for (var i = 0; i < links.length; i++) {
links[i].addEventListener('click', funct);
}

function funct() {
input.value = this.getAttribute('href); //запишет текст из href
input.value = this.innerHTML; //запишет текст из а (Инфо1, 2...)
}

Comments

[Mesuti]

К сожалению, не работает
https://jsfiddle.net/Mesuti/mkfbw6zy/

[unsxxndxrk]

var links = document.getElementsByClassName('link');
var input = document.getElementById('textLink');

for (var i = 0; i < links.length; i++) {
links[i].addEventListener('click', funct);
}

function funct() {
input.value = this.getAttribute('href); 
}

[Виталий Першин]

Потеряли контекст https://jsfiddle.net/l2banners/xhtwqLyu/

[unsxxndxrk]

Get-Web, можно и без event так как обработчик повешен на все ссылки, и this будет указывать на текущий контекст вызова.