How to duplicate input text field in another field simulaneously

Hi guys,

I’m trying to duplicate the value of a input text field into another field simulaneously.

I came up with the following but its not simulaneously (meaning you need to click somewhere outside the field to trigger the duplication):

<input type="text" id="name" value="">
<input type="text" id="duplicatedName" value="">
	
const name1 = document.getElementById("name");
const name2 = document.getElementById("duplicatedName");
	
function calculate(){
		name2.value = name1.value;
}

name1.addEventListener('change', calculate);
</script>

So I’m searching for a practical way to have the change simulaneously without the need to click outside the field.

Will really appreaciate any suggestions.
Thank you in advance.

That appears to be expected, change event is not triggered on every change, see HTMLElement: change event - Web APIs | MDN. As noted in the article, the input event might be better suited here.

1 Like