A script only sees what is above it
The head script ran before the parser had built the <h1>, so it found nothing (null). The second script came after it.
JavaScript reaches a page through the <script> element, either written inline or loaded from a .js file; where you put it and whether you add defer, async or type="module" decides when it runs and what it can see.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write the head of a page that loads menu.js and then app.js so both run after parsing, with app.js guaranteed to run second.
Rewrite the first live example so the head script works without moving it, using DOMContentLoaded.
Explain it without notes
What is the difference between a plain script, defer and async?
Why does document.getElementById return null when called from a plain script in the head?
Why are external script files preferred over inline scripts on real sites?
Preview
Console
Nothing logged yet.Expected console output
In the head, the heading is: null
After it in the body: <h1#title>