Esta es la estructura HTML...
<head> ... <script> ENV = {..., current_user: { id: "314", display_name: "My name" } } <script/> ... <head/>Estoy tratando de leer "display_name" para usarlo en otra parte de la aplicación.
Si presiono F12 y ejecuto lo siguiente en la consola, funciona devolviendo el nombre:
console.log(ENV.current_user.display_name)pero a continuación no funciona dentro de la misma página de la anterior:
<script> const x = ENV.current_user.display_name; document.getElementById("std").innerHTML = x; </script> <h3 id="std"></h3>¿Cómo puedo imprimir "Mi nombre" dentro de este h3?
Su elemento estándar aún no se representa cuando se ejecuta su secuencia de comandos. Esto debería funcionar:
<script> (function() { const x = ENV.current_user.display_name; document.getElementById("std").innerHTML = x; })(); </script>Póngalo en el cuerpo, al final del cuerpo.
No está viendo el nombre porque la secuencia de comandos debe moverse al cuerpo.
JavaScript está buscando el div, sin embargo, está devolviendo NULL porque su JS ha sido llamado antes de que se haya cargado la página.
<body> <h3 id="std"></h3> </body> <script> ENV = { current_user: { id: "314", display_name: "My name" } }; const x = ENV.current_user.display_name; document.getElementById("std").innerHTML = x; </script>Su
document.getElementById("std").innerHTML = x; no funciona porque su secuencia de comandos se ejecuta antes de que el DOM termine de cargarse, por lo que devolverá un valor nulo o indefinido. Lo que puedes hacer es poner tu al final de <body></body>
Así es como debería verse todo el código:
<head> <script> ENV = { current_user: { id: "314", display_name: "My name" } } </script> </head> <body> <h3 id="std"></h3> <script> const x = ENV.current_user.display_name; document.getElementById("std").innerHTML = x; </script> </body>Otra forma de asegurarse de que su navegador ejecute el script después de cargar HTML es separar el script js en un archivo diferente e incluirlo en HTML por
<script defer src='./filename.js'></script>
La palabra defer le dice al navegador que ejecute filename.js solo cuando se carga el HTML.