<input type="text">

<output>
  Characters: <span></span>
</output>

const input = document.querySelector("input");
const output = document.querySelector("output > span");

input.addEventListener("input", () => {
  output.innerHTML = input.value.length;
});

Totally works. But, you won’t see any character count until you start typing something. That’s probably not ideal. It should count the characters when this HTML initially loads.

So how do you fire off an initial count? One way is to shoot a “synthetic” event at the input, so that event hander fires. That’s right, you can just create an event out of thin air with code and dispatch it. Like:

input.dispatchEvent(
  new Event("input", {
    bubbles: true,
    cancelable: true
  })
);

Works!

That’s not the only way do this. We could make the event handler call a function (instead of using an anonymous function) and then just call that function once ourselves. That’s probably, generally, a more sane way to go about it. But it’s good to know multiple ways. Plus, some event handler functions use the event as a parameter to do things, and rather than write logical conditions on the presence of that event, providing the synthetic one makes that easier.

Lots more to learn on the JavaScript Learning Path!