Character Count

Enter your text below.

You've written 0 characters.

<label for="text">Enter your text below.</label>
<textarea id="text"></textarea>

<p>You've written <strong><span id="character-count">0</span> characters</strong>.</p>

<script async>

  // Variables
  let inputElement = document.querySelector('textarea');
  let counter = document.querySelector('#character-count');

  // Methods
  function characterCount () {
    counter.textContent = inputElement.value.length;
  }

  // Listeners
  inputElement.addEventListener('input', characterCount)

</script>

Other ideas

With reusable functions

function getCharacterCount (field) {
  return field.value.length;
}

function handleInput (count, text) {
  count.textContent = getCharacterCount(text);
}

inputElement.addEventListener('input', function() {
  handleInput(counter, this);
});