Estoy tratando de ver qué está mal con la declaración if a continuación. ¿Alguno de ustedes puede aclararme dónde podría haber un caso en el que esta línea podría arrojar un error? ¿Debo verificar explícitamente si el elemento es nulo o indefinido? Aquí está el código:
const firstElement = document.querySelector('.large-image > a > img'); const secondElement = document.querySelector('.slides > li'); // This is the line I'm referring too if ((firstElement && firstElement.offsetWidth > 0) && firstElement.getAttribute('src') == secondElement.firstChild.getAttribute('src')) return 'ELEMENT'; }Primero, reformateemos esa línea para que sea legible:
// This is the line I'm referring too if ( firstElement && firstElement.offsetWidth > 0 && firstElement.getAttribute('src') == secondElement.firstChild.getAttribute('src') ) { return 'ELEMENT' } Si el elemento en .slides > li no se encuentra en el documento, secondElement no estará undefined .
Y luego, cuando llegue a secondElement.firstChild , se bloqueará porque no se puede acceder a firstElement en undefined .
Entonces, si alguno de los elementos no existe en la página cuando se ejecuta este código, debe verificar que ambos elementos existan antes de acceder a ellos.
Tal vez algo como:
if ( firstElement && secondElement && secondElement.firstChild && // couldn't hurt ¯\_(ツ)_/¯ firstElement.offsetWidth > 0 && firstElement.getAttribute('src') == secondElement.firstChild.getAttribute('src') ) { return 'ELEMENT' }También puede usar el Optional chaining (?.) para realizar la misma tarea escribiendo menos código.
Operador de encadenamiento opcional (?.) - Documentación de MDN
El operador de encadenamiento opcional (?.) le permite leer el valor de una propiedad ubicada en lo profundo de una cadena de objetos conectados sin tener que verificar que cada referencia en la cadena sea válida.
if ( firstElement?.offsetWidth > 0 && firstElement?.getAttribute('src') === secondElement?.firstChild?.getAttribute('src') ) { return 'ELEMENT' }