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,938 Points
Posted by Christopher Wester
.a{fill-rule:evenodd;}techdegree
Christopher Wester
Full Stack JavaScript Techdegree Student 3,938 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,049 Points
Steven Parker
Steven Parker
244,049 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.