user3688491 user3688491 - 3 months ago 16
HTML Question

Bind two inputs so they display the same text even if one of them was changed using only native JS

I know how do that with Jquery http://jsfiddle.net/69UAT/ But can you help me with native JS.
jQuery:

$('.inputs').on('keyup',function(){
$(this).parent().not(this).find('.inputs').val($(this).val());
}
);


HTML:

<div>
<input type="text" class="inputs" value="hello">
<input type="text" class="inputs" value="John">
</div>

Answer
const inputs = document.querySelectorAll(".inputs");
inputs.forEach(input => {
  input.addEventListener("keyup", e => {
    let value = e.target.value;
    inputs.forEach(input => input.value = value);
  });
});