When I count box which are checked, it counts plus one box

I would like to count the number of boxes which are checked. It almost works. But it counts plus one box and I don't know why.

const updateCount = function() {
  var x = document.querySelectorAll(".square:checked").length;
  document.querySelector(".pts").innerHTML = x;
};

<div class="displaysquares" data-id="<%= match.id %>">
  <input type="checkbox" class="square" onclick="updateCount()" data-outcome="1" />
  <input type="checkbox" class="square" onclick="updateCount()" data-outcome="NULL" />
  <input type="checkbox" class="square" onclick="updateCount()" data-outcome="2" />
</div>

<span class="pts"></span>