Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript One Solution

Christopher Wester
seal-mask
.a{fill-rule:evenodd;}techdegree
Christopher Wester
Full Stack JavaScript Techdegree Student 3,947 Points
Posted by Christopher Wester
.a{fill-rule:evenodd;}techdegree
Christopher Wester
Full Stack JavaScript Techdegree Student 3,947 Points

Web Accessibility: Checkboxes - Uncaught TypeError: Cannot read properties of undefined (reading 'classList')

My workspace snapshot is here

I can copy Brian's solution utilizing .forEach and get his solution to work, but my initial code used i as an incrementor. For some reason, my code keeps failing when tabbing through focus

"Uncaught TypeError: Cannot read properties of undefined (reading 'classList')"

const checkboxGroup = document.querySelectorAll('input[type="checkbox"]');

for ( i = 0; i < checkboxGroup.length; i++ ) {
  checkboxGroup[i].addEventListener('focus', () => {
    checkboxGroup[i].classList.add('focus');
    checkboxGroup[i].parentElement.classList.add('focus');
  } );
  checkboxGroup[i].addEventListener('blur', () => {
    checkboxGroup[i].classList.remove('focus');
    checkboxGroup[i].parentElement.classList.remove('focus');
  } );
}

I can pull out the following line and run it through the console with no issue. checkboxGroup[0].classList.add('focus');

Where am I causing an issue?

1 Answer

Steven Parker
Steven Parker
244,065 Points
Steven Parker
Steven Parker
244,065 Points

The value of "i" will be different when the event handler is called than what it was when listener was established. It will likely be what it was when the loop ended, which is one higher than the last list item index. So when it tries to reference that index it will get "undefined", which of course does not have a classList property.

Christopher Wester
seal-mask
.a{fill-rule:evenodd;}techdegree
Christopher Wester
Full Stack JavaScript Techdegree Student 3,947 Points
Christopher Wester
.a{fill-rule:evenodd;}techdegree
Christopher Wester
Full Stack JavaScript Techdegree Student 3,947 Points

Aha!!

Thanks, Steven. I knew that the for loop was properly adding the event listeners, so I could not identify why the listeners were not identifying the correct element to add the class.

The i incrementor had already been assigned beyond the length of the array when the callback function is called. So if I change my code to use e.target, the code now works as expected.

const checkboxGroup = document.querySelectorAll('input[type="checkbox"]');

for ( i = 0; i < checkboxGroup.length; i++ ) {
  checkboxGroup[i].addEventListener('focus', (e) => {
    e.target.classList.add('focus');
    e.target.parentElement.classList.add('focus');
  } );
  checkboxGroup[i].addEventListener('blur', (e) => {
    e.target.classList.remove('focus');
    e.target.parentElement.classList.remove('focus');
  } );
}

So I need to remember to avoid using incrementors, such as i, when adding callback functions.