Bugbyte - Issue 307

Problem

<html lang="en">
  <input type="checkbox" id="checkbox" />
  <label for="checkbox">Click me</label>
  <p id="message"></p>

  <script>
    checkbox.onclick = () => handleClick();

    function handleClick() {
      if (checkbox.checked) {
        message.textContent = "Checkbox is checked!";
        return true;
      } else {
        message.textContent = "Checkbox is unchecked!";
        return false;
      }
    }
  </script>
</html>

Solution

Returning false from the event handler disables the default action of the checkbox. This means that the checkbox will not change its state when clicked. You can use the void operator to prevent the return value from interfering with the default action:

<html lang="en">
  <input type="checkbox" id="checkbox" />
  <label for="checkbox">Click me</label>
  <p id="message"></p>

  <script>
    checkbox.onclick = () => void handleClick();

    function handleClick() {
      if (checkbox.checked) {
        message.textContent = "Checkbox is checked!";
        return true;
      } else {
        message.textContent = "Checkbox is unchecked!";
        return false;
      }
    }
  </script>
</html>