Make a Button Do Something
Your first taste of programming: respond to a click with JavaScript.
You will learn to
- Select elements from the Document Object Model (DOM)
- Listen for user interactions (click events)
- Dynamically update HTML content using JavaScript
- Use variables to track state (like click counts)
- Modify CSS classes and inline styles dynamically
Before you start
- Comfort editing HTML (try Build Your First Web Page first)
Tools needed
- The in-browser Code Sandbox (embedded below)
Your workspace
Practise right here. Work through the steps below in this environment.
console.log output appears here.
Step-by-step
Tick each task as you finish it, your progress saves on this device.
1. Set up the HTML structure
Before writing JavaScript, we need elements to interact with. Switch to the HTML panel. Create a `<button id="greet-btn">Click Me!</button>` and below it, an empty paragraph `<p id="message"></p>`. We use `id` attributes so JavaScript can easily find these specific elements.
Done when: You have a button and an empty paragraph in your HTML2. Find the elements in JavaScript
Switch to the JS panel. Use `document.getElementById("greet-btn")` to grab the button and store it in a variable called `btn`. Do the same for the message paragraph, storing it in a variable called `msgText`. Logging them to the console (`console.log(btn)`) is a good way to check if you found them.
Done when: You have two variables referring to the button and the paragraph3. Listen for a click event
Call `btn.addEventListener("click", function() { ... })`. This tells the browser to wait until the button is clicked, and then run the code inside the function. For now, just add a `console.log("Button was clicked!");` inside the function. Press Run, open the Console panel, and click your button.
Done when: The console prints a message every time you click the button4. Update the page content dynamically
Instead of just logging to the console, let's change the actual webpage. Inside your click event listener, change the text of the paragraph by setting `msgText.textContent = "Welcome to JavaScript!";`. Press Run and click the button.
Done when: Clicking the button makes the text "Welcome to JavaScript!" appear on the page5. Track state with a counter variable
Let's track how many times the user clicks the button. Above your event listener (outside the function), create a variable using `let clickCount = 0;`. Inside the event listener, increase this variable by 1 (`clickCount++`), and update the paragraph to say "You have clicked the button X times." using template literals.
Done when: The message updates with an accurate, incrementing click count6. Change CSS styles with JavaScript
JavaScript can also change styles! Add logic inside your click handler: if `clickCount` is greater than 5, change the button's background color to red and the text color to white by modifying `btn.style.backgroundColor` and `btn.style.color`.
Done when: After 5 clicks, the button permanently turns red
Finished every step?
Mark the lab complete to record it on this device.
Reflect
If you can answer these in your own words, the lab stuck.
- Why did we use `let` for the counter variable instead of `const`?
- What is the difference between `console.log()` and modifying `textContent`?
- Why must the counter variable be declared outside the event listener function?