Press ▶ Show page to see your page here.
Lesson 47: A pinch of JavaScript
Level 6, Make a Web Page. Make a button change the page when you click. The new word: JavaScript. It follows lesson 46, CSS: colours and style. Next comes lesson 48, The folder of a site.
What the lesson explains
A pinch of JavaScript. Make the page do something when you click. Press Show page, then click the button on the page.
Click, then run. The button calls a function. The function changes the page. onclick the click; sayHi() the function; #msg gets words.
What you do first
Your own message. Make the button say You clicked me!. One way: write in script.js: document.getElementById("msg").textContent = "You clicked me!";. Then press Show page to see it.
The files on the practice computer
This lesson works in 0 folders. At the start, .
You change nothing here, so lesson 48 finds the same files.
The page on the screen
A pinch of JavaScript. The page uses the tags <h1>, <button>, <p>, <script>, and its big title reads "Click the button".
Click, then run. The page uses the tags <h1>, <button>, <p>, <script>, and its big title reads "Click the button".
What you practise
Try it, "Your own message": Make the button say You clicked me!. One way: write in script.js: document.getElementById("msg").textContent = "You clicked me!";. Then press Show page to see it.
Try it, "Talk to the console": Add console.log("Clicked!"); inside the function. One way: write in script.js: console.log("Clicked!");. Then press Show page to see it.
Fix it, "Capital letters count": Make the button call sayHi(). One way: write in index.html: <button onclick="sayHi()">Say hi</button>. Then press Show page to see it.
Challenge, "A second button": Add a Bye button and its function. One way: write in index.html: <button onclick="sayBye()">Bye</button>; and in script.js: function sayBye() { / document.getElementById("msg").textContent = "Bye for now!"; / }. Then press Show page to see it.
What PlayBuddy and PlayType say
PlayBuddy: "JavaScript makes a page do things when you click!"
PlayType: "The button calls a function. The function changes the page."
Help in every lesson
Everything happens on a pretend computer in your browser, so nothing touches your real files. PlayBuddy and PlayType stand beside the board, cheer you on and say when it is your turn.
A green ring shows where to click the first time. After that you do it on your own, and if you slip twice the ring comes back.
Stars
The lesson has 4 things to do. Up to one slip in ten gives three stars, up to one in four gives two, and finishing always gives at least one. Stars and progress are saved in this browser only; there is no account.
About DayOneCode
DayOneCode is an independent learning site, not affiliated with or endorsed by Anthropic. Claude and Claude Code are trademarks of Anthropic.