Read array value from a variable inside an HTML head

Question

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?

The error in the developer console should clearly state your problem. — epascarello, Feb 24 '22 at 16:32

score 1 · Answer 1 · answered Feb 24 '22 at 16:09

you can import in all pages a global configuration file (config.js) and then include others scripts

<body>
 <h3 id="std"></h3>
 <script src="config.js" />
 <script>
     const x = ENV.current_user.display_name;
    
     document.getElementById("std").innerHTML = x;
 </script>
</body>

and your config file would have the ENV variable.

the scripts should not be declared in the header for reasons of page load time, it is always recommended to place them at the end inside the body tag

score 1 · Answer 2 · answered Feb 24 '22 at 16:15

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.

score 1 · Accepted Answer · edited Feb 24 '22 at 16:24

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>

score 1 · Answer 4 · answered Feb 24 '22 at 16:25

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.

Read array value from a variable inside an HTML head

4 Answers4