1

Me sale esto en consola

Uncaught TypeError: Cannot set properties of null (setting 'textContent')

Mi código es:

const numbers=document.getElementById("numbers"); 
const result=document.getElementById("result"); 
let a=prompt("Introduzca el primer numero"); 
let b=prompt("Introduzca el segundo numero"); 
let c=prompt("Introduzca el tercer numero"); 
numbers.textContent="Los numeros son ${a},${b},${c}"; 

Mi html:

<!DOCTYPE html> 
    <html lang="es"> 
        <head> 
            <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
            <title>Hola mundo</title> 
            <script src="exercise.js"></script> 
         </head> 
   <body> 
       <div id="numbers"></div> 
       <div id="result"></div> 
   </body> 
</html> 

Ahora supongo que en la propiedad de text.content es el problema no entiendo que escribo mal la verdad, solo queria que me reflejara ese mensaje de los números son las variables dada

3
  • <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hola mundo</title> <script src="exercise.js"></script> </head> <body> <div id="numbers"></div> <div id="result"></div> </body> </html> el 16 oct. 2021 a las 1:51
  • no entendi muy bien amigo? cual llamado de mi archivo js los divs con su id estan antes del cierre del body no entiendo la verdad a que te refieres? el 16 oct. 2021 a las 2:04
  • wow amigo! Excelente tenia mas de 1 hora atorado en ese problema, muchas gracias! Me podrias decir porque es de ese error y el porque se soluciono como tu me lo indiciaste, un grande! el 16 oct. 2021 a las 2:19

2 respuestas 2

1

Depende del navegador, pero a veces el código javascript se ejecuta antes de que existan los divs en el DOM (o sea en la pantalla). Cuando tengas que manipular objetos del DOM (o sea divs, inputs, spans, etc...) conviene asegurarse que esté listo. La manera más común es usando addEventListener('load', ...:

window.addEventListener('load', function(){
    const numbers=document.getElementById("numbers"); 
    const result=document.getElementById("result"); 
    let a=prompt("Introduzca el primer numero"); 
    let b=prompt("Introduzca el segundo numero"); 
    let c=prompt("Introduzca el tercer numero"); 
    numbers.textContent=`Los numeros son ${a},${b},${c}`; 
});

Si usas funciones, las puedes poner fuera del addEventListener pero el llamado a ellas tienen que partir de dentro del addEventListener. Por ejemlo:

function ponerTextoEnId(id, texto){
    var element = document.getElementById(id);
    element.textContent = texto;
}
window.addEventListener('load', function(){
    const result=document.getElementById("result"); 
    let a=prompt("Introduzca el primer numero"); 
    let b=prompt("Introduzca el segundo numero"); 
    let c=prompt("Introduzca el tercer numero"); 
    ponerTextoEnId('numbers', `Los numeros son ${a},${b},${c}`); 
});

Otras:

  • La interpolación de variables ${a} tiene que estar dentro de comillas simples invertidas (como en los ejemplos que puse).

  • Los archivos.js conviene que esté al final de todo el archivo html. Eso tiene muchas mejoras (empieza a visualizar antes), pero no soluciona siempre el problema que tenías (depende del navegador y de la velocidad de la máquina). Lo correcto es el addEventListener('load',...

0

El problema viene del hecho de que el elemento div no se ha creado al momento de ejecutar la función.

Puedes colocar el elemento script al final del body, o puedes colocarle la etiqueta 'defer' que básicamente difiere la carga del archivo script (javascript):

<script src='script.js' defer></script>

Hay diversas maneras, también puede contener todo tu script en una función que 'escuche' y que responda a la carga de la página:

window.addEventListener('load', () => { //... };

Acá hay un artículo que reune varios métodos:

https://javascript.info/onload-ondomcontentloaded

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.