Bienvenido a la Comunidad de Treehouse

¿Quieres colaborar en errores de código? ¿Tienes errores que necesitan comentarios? ¿Buscas un par de ojos adicionales en tu último proyecto? aquí.

¿Buscas aprender algo nuevo?

Treehouse ofrece una prueba gratuita de siete días para estudiantes nuevos. Obtén acceso a miles de horas de contenido y únete a miles de

Inicia tu prueba gratuita

JavaScript Una solución

Christopher Wester
sello-máscara
.a{fill-rule:evenodd;}techdegree
Christopher Wester
JavaScript Full Stack Estudiante de Techdegree 5,818 Puntos
Publicado por Christopher Wester
.a{fill-rule:evenodd;}techdegree
Christopher Wester
JavaScript Full Stack Estudiante de Techdegree 5,818 Puntos

Accesibilidad web: casillas de verificación - Error no capturado: No se pueden leer propiedades de indefinido (leyendo 'classList')

Mi captura de pantalla del área de trabajo es aquí

Puedo copiar la solución de Brian utilizando .forEach y hacer que su solución funcione, pero mi código inicial utilizó i como incrementador.

Error no detectado: No se pueden leer las propiedades de undefined (leyendo 'classList')

const checkGroup = documento.querySelectorAll('input[type="checkbox"]');

para ( i = 0; i < checkGroup.longitud; i++ ) {
  checkGroup[i].addEventListener('focus', () => {
    checkGroup[i].classList.add('focus');
    checkGroup[i].parentElement.classList.add('focus');
  } );
  checkGroup[i].addEventListener('blur', () => {
    checkGroup[i].classList.remove('focus');
    checkGroup[i].parentElement.classList.remove('focus');
  } );
}

Puedo extraer la siguiente línea y ejecutarla a través de la consola sin ningún problema. checkboxGroup[0].classList.add('focus');

¿Dónde estoy causando un problema?

1 Respuesta

Steven Parker
Steven Parker
244 163 puntos
Steven Parker
Steven Parker
244 163 puntos

El valor de "i" será diferente cuando se llame al controlador de eventos que cuando se estableció el oyente. Es probable que sea lo que era cuando el bucle terminó, que es uno más que el índice del último elemento de la lista. Entonces, cuando intenta hacer referencia a ese índice, obtendrá "undefined", que por supuesto no tiene classList .

Christopher Wester
sello-máscara
.a{fill-rule:evenodd;}techdegree
Christopher Wester
JavaScript Full Stack Estudiante de Techdegree 5,818 Puntos
Christopher Wester
.a{fill-rule:evenodd;}techdegree
Christopher Wester
JavaScript Full Stack Estudiante de Techdegree 5,818 Puntos

¡Ajá!

Gracias, Steven.

Los i El incrementador ya había sido asignado más allá de la longitud de la matriz cuando se llama a la función de devolución de llamada. e.target, el código ahora funciona como se esperaba.

const checkGroup = documento.querySelectorAll('input[type="checkbox"]');

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

Así que necesito recordar evitar usar incrementadores, como i, cuando se añaden funciones de devolución de llamada.