Computer Science
Grade 5
20 min
Making a Button Do Something
Create a simple program where clicking a button triggers an action (e.g., displaying a message).
Tutorial Preview
1
Introduction & Learning Objectives
Learning Objectives
Define the terms 'event' and 'event handler' in their own words.
Create a button element in a user interface.
Write a simple event handler that triggers when a button is clicked.
Use a button click event to change a visual property, like screen color or text.
Use a button click event to modify the value of a variable.
Debug a simple program where a button is not working as expected.
Ever wondered how a video game character jumps *exactly* when you press a button? 🤔 Let's learn the secret to making things happen on command!
In this lesson, you will learn how to make buttons that actually do things when you click them. This is a super important skill called event-driven programming, which is how most apps and games wait for you to...
2
Key Concepts & Vocabulary
TermDefinitionExample
EventAn action that happens in a program, like a user clicking the mouse, pressing a key, or tapping the screen.When you click a 'Next Level' button in a game, the 'click' is the event.
Event HandlerA special block of code that waits for a specific event to happen and then runs a set of instructions in response.The code that loads the new level *after* you click the 'Next Level' button is the event handler.
User Interface (UI)The visual parts of a program that a person can see and interact with, like buttons, images, and text boxes.The screen of your favorite app, with all its buttons and menus, is the User Interface.
ButtonA UI element that a user can click to trigger an event.A button labeled 'Start' that begins a quiz.
ID (I...
3
Core Syntax & Patterns
The 'On Event' Pattern
onEvent(element_ID, event_type, function() { ... code to run ... });
This is the main pattern for making things happen. You tell the computer which element to watch (element_ID), what action to look for (event_type, like 'click'), and what code to run when it happens.
Modifying a Property
setProperty(element_ID, property, value);
Use this inside an event handler to change something about an element. You can change the 'background-color', 'text', 'width', or 'height' of an element after an event occurs.
Updating a Variable
variable = variable + 1;
Place this inside an event handler to change the value of a variable. This is perfect for keeping score, counting clicks, or tracking lives i...
4 more steps in this tutorial
Sign up free to access the complete tutorial with worked examples and practice.
Sign Up Free to ContinueSample Practice Questions
Challenging
You have three buttons: Red, Green, and Blue. When you click the Red button, you want a square to turn red, and you also want to disable the Green and Blue buttons so they can't be clicked. What is the best way to code the Red button's 'on click' event?
A.Only include the 'change color to red' command
B.Send a message to the Green and Blue buttons to disable themselves
C.Inside the Red button's event, include commands to change the square's color AND set the 'disabled' property of the Green and Blue buttons to true
D.Put a loop inside the Red button's event that checks if the other buttons are clicked
Challenging
A button opens a castle door. The door should only open if it's daytime AND the player has the key. You have two boolean variables: `is_daytime` and `has_key`. Which conditional logic inside the 'on click' event is correct?
A.if is_daytime OR has_key
B.if is_daytime AND has_key
C.if is_daytime, then if has_key is false
D.if not is_daytime AND not has_key
Challenging
Each time a button is clicked, a number is added to a total score. The numbers added follow a pattern: 1, 2, 4, 8, 16... What is most likely happening to a variable inside the button's event handler with each click?
A.variable is being increased by 1
B.variable is being increased by 2
C.variable is being divided by 2
D.variable is being multiplied by 2
Want to practice and check your answers?
Sign up to access all questions with instant feedback, explanations, and progress tracking.
Start Practicing Free