Как обратиться к инпуту слева?

Question

[Алексей]

Есть подобный код:

<input name='one' class='fields' type='text' default-value='1kg' value='1kg' ><button class='sbros'>Сброс</button>
<input name='two' class='fields' type='text' default-value='10kg' value='10kg' ><span class='new'>NEW</span><button class='sbros'>Сброс</button>
<input name='ten' class='fields' type='text' default-value='12kg' value='12kg' ><span class='hot'>HOT</span><span class='new'>NEW</span><button class='sbros'>Сброс</button>

Нужно, чтобы при клике на кнопку Сброс - в input слева вставлялось значение из default-value, но как обратиться именно к input, который находится слева? Между инпутом и кнопкой могут быть другие элементы (span'ы, например)...

Answer 1

[0xD34F]

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

document.addEventListener('click', function(e) {
  if (e.target.classList.contains('sbros')) {
    for (let el = e.target; el = el.previousElementSibling;) {
      if (el.classList.contains('fields')) {
        el.value = el.getAttribute('default-value');
        break;
      }
    }
  }
});

Лучше бы конечно добавить общую обёртку каждой паре инпут-кнопка и элементам между ними. Тогда код станет проще и короче - достаточно подняться от кликнутой кнопки к обёртке и внутри неё найти инпут, для обоих действий есть отдельные методы:

document.addEventListener('click', ({ target: t }) => {
  if (t.matches('.sbros')) {
    const el = t.closest('здесь селектор обёртки').querySelector('.fields');
    el.value = el.getAttribute('default-value');
  }
});

Ещё вариант - можно вычислять индекс кликнутой кнопки и обращаться к инпуту с таким же индексом:

const inputs = document.querySelectorAll('.fields');
const buttons = [...document.querySelectorAll('.sbros')];
buttons.forEach(n => n.addEventListener('click', onClick));

function onClick(e) {
  const el = inputs[buttons.indexOf(e.target)];
  el.value = el.getAttribute('default-value');
}