Click event works correctly in onclick attribute but not as addeventlistener

Question

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.

PS 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.

Answer 1

The reasons are that a) you're event.preventDefault() on the checkbox's event which will prevent it from getting checked and b) if it's checked you uncheck it immediately with consentCheck.checked = false . You were also having the opposite logic for the agree button, so you were disabling it when the checkbox was checked and enabling it when the checkbox was unchecked.

So the checkbox in the second example can't be checked for those two reasons, see below:

 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; // was true // consentCheck.checked = false; } else { console.log("unchecked"); dialogConsentBtn.disabled = true; // was false // consentCheck.checked = true; } }, false );

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

Answer 2

Like the answer above, you're preventing the default action by calling the event.preventDefault() method. In addition to that, you should be using an onChange event rather than a click.