Events and Forms

Input Preview

A text input listener reads the current value, writes a preview sentence, and marks the preview as filled.

Program

The input event fires as a control changes. Reading value and writing textContent keeps preview UI synchronized.

input_preview.html 
<input id="name" value="Ada">
<p id="preview">Name preview</p>
<script>
  const input = document.querySelector("#name");
  const preview = document.querySelector("#preview");
  input.addEventListener("input", () => {
    preview.textContent = `Hello, ${input.value}`;
    preview.classList.add("filled");
  });
</script>
input event The input event fires whenever an input value changes.
value The value property reads the current form-control value.