Как записать в value инпута значения сразу нескольких других в реальном времени?

Question

[Goldsliders]

Есть несколько input'ов:

<input name="1" type="text" id="1" value="">
<input name="2" type="text" id="2" value="">
<input name="3" type="text" id="3" value="">
<input name="4" type="text" id="4" value="">

Как записать в первый значения всех остальных через запятые в реальном времени?
То есть, заполняю например второй инпут, а в первом сразу же появляется value.

Answer 1

[0xD34F]

function collectValues(target, ...sources) {
  const onInput = () => target.value = sources.map(n => n.value).join(', ');
  sources.forEach(n => n.addEventListener('input', onInput));
  return () => sources.forEach(n => n.removeEventListener('input', onInput));
}


collectValues(...document.querySelectorAll('input'));

Comments

[Goldsliders]

Тут я как вижу что выбираются все инпуты, а мне нужно именно с этих , так как на страницы есть ещё инпуты

[Алексей Ярков]

Goldsliders, ну так измените селектор на нужный вам

[Goldsliders]

Алексей Ярков, а как сделать выборку из нескольких инпутов

[Goldsliders]

И что бы можно было подставить в определённый инпут

[Алексей Ярков]

Goldsliders, Вам показали как. Просто изменить селектор надо.