Script SpringsISSUE #2 of 29

how to add js · inline · internal · external

SparkyVSNaN the Trickster

Sparky saysAdd JS three ways: inline handlers, an internal <script> block, or an external file via src.

Inline attributes like onclick work but don't scale. An internal <script> block holds page code; an external <script src="app.js"> is the standard for real apps (cached, reusable). Place scripts before </body> or add defer so the DOM exists when they run.

Power-ups you unlock

Inline onX, internal <script>, external src
External files are cached and reusable
defer waits for the DOM; async is independent
Classic placement: just before </body>

NaN the Trickster attacks — common mistakes

Querying elements before they exist (script in head, no defer)
Sprinkling inline onclick everywhere
Forgetting defer/async trade-offs

Boss battleMove an inline onclick into a <script> block using addEventListener.

Example code

<!doctype html><html><head><meta charset="utf-8"></head>
<body style="background:#06040d;color:#e6e0ff;padding:20px">
<button id="b">click</button><p id="o"></p>
<script>document.getElementById('b').addEventListener('click',()=>document.getElementById('o').textContent='from a script block');</script></body></html>

▶ Open the interactive comic issue

‹ Why Javascript · The Language Of The Web Syntax · Statements · Expressions ›