程序改值会自动刷新计数吗？

<label for="text">留言</label><input id="text">
<p id="count">0</p>
<button id="fill" type="button">填入示例</button>
<script>
  const input = document.querySelector('#text');
  const count = document.querySelector('#count');
  input.addEventListener('input', () => { count.textContent = input.value.length; });
  document.querySelector('#fill').addEventListener('click', () => { input.value = 'HTML'; });
</script>

提问：直接点击“填入示例”，输入框和计数分别显示什么？为什么手动输入能更新计数，而程序赋值没有？怎样避免两条路径遗漏状态同步？