Как при клике по однотипным элементам делать их текстовое содержимое значением 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';

Как достать текст, имея на руках элемент:

const getText = el => el.innerText;
// или
const getText = el => el.textContent;
// или (будет работать как надо, пока элемент остаётся ссылкой)
const getText = el => el.text;
// или (будет работать как надо, пока вложенные элементы не появятся)
const getText = el => el.innerHTML;

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

document.addEventListener('click', ({ target: t }) =>
  (t = t.closest(buttonSelector)) &&
  (input.value = getText(t))
);

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

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

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 будет указывать на текущий контекст вызова.