How can I read a form field's current value as someone types?

You can update the preview from the field’s input event, so a button is not needed for this interaction. For text controls, input fires as the person edits the value; change fires when the edit is committed, such as when the field loses focus. [S1]

Here is a small example. It assumes you want the preview to mirror the field, with placeholder text shown when the field is empty:

<label for="headline">Headline</label>
<input id="headline" type="text" placeholder="Type a headline">
<p>Preview: <span id="preview">Your headline will appear here.</span></p>

<script>
  const field = document.querySelector("#headline");
  const preview = document.querySelector("#preview");

  field.addEventListener("input", () => {
    preview.textContent = field.value || "Your headline will appear here.";
  });
</script>

The handler reads field.value when the event occurs, then uses that value to update the preview. The fallback text keeps the preview from becoming blank when the field is empty.

The selectors identify the elements by their IDs: #headline refers to the input, and #preview refers to the span. The listener is attached to the input with addEventListener("input", ...). Each time the handler runs, it reads the field’s current .value and assigns the result to the preview. [S1]

If your page uses different IDs, change the selectors to match. The key pattern is to listen on the field you want to track and read its current value inside the handler. For example, a listener attached to a different input would read that input’s value instead.

Keep the same listener, but display a count calculated from the current value. Assuming your page has a span with the ID count, the relevant code is:

const count = document.querySelector("#count");

field.addEventListener("input", () => {
  count.textContent = String(field.value.length);
});

This changes what the handler displays; it still reads the field’s current value when the input event fires. This example provides a live count display, not a maximum-length rule or other form validation.

Not necessarily. Assigning a value in code does not itself fire the input event, so the listener will not run just because your script changed field.value. [S1] If your code sets the value and should also refresh the preview, put the update in a function and call it after the assignment as well as from the listener:

function updatePreview() {
  preview.textContent = field.value || "Your headline will appear here.";
}

field.addEventListener("input", updatePreview);
field.value = "A starting headline";
updatePreview();

The event listener handles user edits; the direct function call handles the value your code sets. This example is for a text field. The event guidance also flags historical compatibility issues for checkbox and radio controls, so do not assume this text-field example covers those controls. [S1]