This is the HTML structure...
<head>
...
<script>
ENV = {...,
current_user: {
id: "314",
display_name: "My name"
}
}
<script/>
...
<head/>
I'm trying to read "display_name" to use in another part of the application.
If I press F12 and run the below in the console it works returning the name:
console.log(ENV.current_user.display_name)
but below doesn't work inside same page of the above:
<script>
const x = ENV.current_user.display_name;
document.getElementById("std").innerHTML = x;
</script>
<h3 id="std"></h3>
How can I print "My name" inside this h3?
Your std element isn't rendered yet when your script is running. This should work:
<script>
(function() {
const x = ENV.current_user.display_name;
document.getElementById("std").innerHTML = x;
})();
</script>
Put it in the body, at the end of the body.
You're not seeing the name because the script needs to be moved to the body.
JavaScript is looking for the div however it's returning NULL because your JS has be called before the page has been loaded.
<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>
Your
document.getElementById("std").innerHTML = x;
doesn't work because your script run before the DOM finished loading, so they will return null or undefined. What you can do is to put your at the end of <body></body>
Here is the what the entire code should look like:
<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>
Another way to make sure that your browser run the script after HTML is loaded is by separate the js script to different a file and include it in HTML by
<script defer src='./filename.js'></script>
The word defer tell the browser to run filename.js only when the HTML is loaded.