Как при клике на span вставлять его содержимое в инпут?

Question

[Алексей]

Есть такой кусок кода:

<span class="label">Label title</span>
<input name="name" class="value" type="text"  value="BlaBla" data-default="BlaBla"/>
<span class="reset">↺</span>
<span class="oldValue">Old Value For BlaBla</span>

<span class="label">Label title 2</span>
<input name="name" class="value" type="text"  value="BlaBla2" data-default="BlaBla2"/>
<span class="reset">↺</span>
<span class="oldValue">Old Value For BlaBla New</span>

При клике на .reset - вставляется в инпут значение из data-default предыдущего элемента
А как сделать что бы при клике на .oldValue искался предыдущий инпут и вставлялось значение, которое находится между тегами span.oldValue ?

Answer 1

[0xD34F]

Перебираем предыдущие элементы относительно кликнутого, пока не встретится подходящий:

document.addEventListener('click', ({ target: t }) => {
  if (t.matches('.oldValue')) {
    let input = t;
    while (!(input = input.previousElementSibling).matches('.value')) ;
    input.value = t.textContent;
  }
});

Или, вычисляем индекс кликнутого среди таких же как он, хватаем инпут с таким же индексом:

const inputs = document.querySelectorAll('.value');
const spans = [...document.querySelectorAll('.oldValue')];
const onClick = ({ target: t }) => inputs[spans.indexOf(t)].value = t.innerText;
spans.forEach(n => n.addEventListener('click', onClick));

Или, добавьте общие обёртки каждой паре input-span, и тогда можно будет подниматься до этой обёртки и искать нужный элемент внутри неё:

document.addEventListener('click', ({ target: t }) => {
  if (t.classList.contains('oldValue')) {
    t.closest('селектор общей обёртки').querySelector('.value').value = t.innerHTML;
  }
});

Comments

[Алексей]

<input type="text">
<span class='oldValue'>Text</span>

<input type="text">
<span class='oldValue'>Text2</span>

а вот так не работает ((

[0xD34F]

А с какого перепугу должно? Класс value у инпутов отсутствует, так что они не будут найдены.

Меняйте селектор '.value' на 'input'.

Или, можно совсем просто сделать:

document.querySelectorAll('.oldValue').forEach(function(n) {
  n.addEventListener('click', this);
}, ({ target: t }) => t.previousElementSibling.value = t.textContent);

Answer 2

[Deeno]

https://jsfiddle.net/suf7hgw2/1/