I'm having an interesting issue that I feel should be pretty simple but it has me stumped. I'm trying to simply track the checked state of a checkbox (if checked, enable a button, if unchecked, leave button disabled). The issue I've come up against is that I can't seem to properly track the checked state of the checkbox in an event listener, but it works if I add it as an onclick attribute in the html and I have no idea why this is.

Working code with html onclick attribute:

**Html:**

```
<input type='checkbox' name='check' id='consent' onclick='checkConsent()'>
<label for='check'>Lorem ipsum</label>
<button id='consentBtn' disabled>Agree</button>

```

**JS:**

```
const dialogConsentBtn = document.getElementById('consentBtn');
const consentCheck = document.getElementById('consent');

const checkConsent = () => {

  if (consentCheck.checked === true) {
    console.log('checked');
    dialogConsentBtn.disabled = false;
  } else {
    console.log('unchecked');
    dialogConsentBtn.disabled = true;
  }
}

```

Non-working code with event listener:

**HTML:**

```
<input type='checkbox' name='check' id='consent'>
<label for='check'>Lorem ipsum</label>
<button id='consentBtn' disabled>Agree</button>

```

**JS:**

```
    const dialogConsentBtn = document.getElementById('consentBtn');
    const consentCheck = document.getElementById('consent');

    consentCheck.addEventListener('click', (event) => {
      event.preventDefault();
      if (consentCheck.checked === true) {
        console.log('checked');
        dialogConsentBtn.disabled = false;
        consentCheck.checked = true;
      } else {          
        console.log('unchecked');
        dialogConsentBtn.disabled = true;
        consentCheck.checked = false;
      }
    }, false);

```

In the above (non-working) code, I get the following behavior: 

* checkbox does not check or uncheck visually
* console.log is always printing out 'unchecked' so the if condition is
always coming back true

I have a feeling there's some sort of fundamental difference between how these two things are handled by the browser that's at the heart of my dilemma, but I just can't seem to figure out what that is. Any help with this would be greatly appreciated.

P.S. I also attempted the above code with a 'change' event in the event listener instead of a click event but I come up on the same issue.