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

Question

[Михаил Юматов]

Есть <input type="range"> и <input type="number">
Нужно чтобы при изменении значения в одном из них, также менялось в другом.
javascript на нуле можно сказать, jquery только что то такое могу написать.
Как более правильно это сделать?

input_connect('#input', '#output');

function input_connect(input, output) {
	$(input).on('input', function() {
		var newval = $(this).val();
		$(output).val(newval);
	});
	$(output).on('input', function() {
		var newval = $(this).val();
		$(input).val(newval);
	});
}

Answer 1

[0xD34F]

function connectInputs(selector) {
  const onInput = e => $inputs.val(e.target.value);
  const $inputs = $(selector).on('input', onInput);
  return () => $inputs.off('input', onInput);
}


connectInputs('#input, #output');

или, к чёрту jquery:

function connectInputs([...inputs]) {
  const onInput = e => inputs.forEach(n => n.value = e.target.value);
  inputs.forEach(n => n.addEventListener('input', onInput));
  return () => inputs.forEach(n => n.removeEventListener('input', onInput));
}


connectInputs(document.querySelectorAll('#input, #output'));

Comments

[Михаил Юматов]

Не понял, как это должно работать?

[0xD34F]

Не понял, что вы не поняли.

[Михаил Юматов]

0xD34F, Как это работает, если функция принимает 1 значение?

[0xD34F]

Один селектор может соответствовать нескольким элементам.