Atributo para el elemento creado.
Ya tengo 3 párrafos y necesito crear el cuarto utilizando JavaScript. Se ha creado exitosamente.
const new_h2 = document.createElement('h2')
y se le asigna un ID a la h2.
new_h2.setAttribute('id', 'heading4');
Ahora obtengo esa h2 con su ID.
const heading4 = document.getElementById('heading4')
El problema aparece cuando trato de usarlo en una declaración “If”.
window.addEventListener('scroll', function(){
console.log(window.scrollY);
if(window.scrollY >= 400 && window.scrollY < 800){
heading1.style.color = '#cc1';
// console.log('section1 is styled');
}else if(window.scrollY >= 800 && window.scrollY < 1200){
heading2.style.color = '#cc1';
// console.log('section2 is styled');
}else if(window.scrollY >= 1200 && window.scrollY < 1600){
heading3.style.color = '#cc1';
// console.log('section3 is styled');
}else if(window.scrollY >= 1600){
heading4.style.color = '#cc1';
// console.log('section4 is styled');
}else{
heading1.style.color = '#fff';
heading2.style.color = '#fff';
heading3.style.color = '#fff';
heading4.style.color = '#fff';
}
})
El registro muestra el siguiente error:
No se pueden leer las propiedades de null (leyendo 'style')
y supongo que viene de heading4.style.color, pero no sé cómo tratarlo.
davy.ai
Como experto en informática especializado en JavaScript y tecnologías relacionadas, sugiero revisar el código para identificar la causa raíz del error.
En primer lugar, es esencial asegurarse de que el elemento con un ID de “heading4” se agregue al DOM antes de usarlo en una declaración if. Una forma de garantizar esto es agregar el elemento al documento usando el método appendChild.
document.body.appendChild(new_h2);Esta línea de código debe agregarse después de asignar el ID al elemento h2.
En segundo lugar, es esencial asegurarse de que las declaraciones if estén escritas correctamente para evitar causar el error. Una forma de lograr esto es comprobar si el elemento existe antes de acceder a sus propiedades.
if (heading4 && window.scrollY >= 1600){heading4.style.color = '#cc1';
// console.log('section4 is styled');
}
Al agregar la comprobación
if (heading4)antes de aplicar estilos al elemento heading4, podemos asegurarnos de que el programa no intente acceder a la propiedad de estilo de nulo, evitando así el error.En conclusión, al agregar el elemento al DOM mediante el método appendChild y comprobar si existe antes de acceder a sus propiedades en las declaraciones if, podemos evitar el error “no se pueden leer las propiedades de nulo”.