Buttons and Clicks

So far, Tina the turtle has drawn pictures for us. Now let’s build something you can click! In Brython you can make buttons, boxes, and text — right here in the browser, using the same editor.

Two new ideas:

screen is your space to put things. You add a piece with screen.add(piece), and it appears in the box below your code.
from browser import html gives you the pieces to build with, like html.BUTTON("...") and html.H2("...").

You make a button do something with button.bind("click", ...) — that tells Python which function to run each time the button is clicked.

A button that says hi

Press Run, then click the button.

from browser import html

message = html.H2("Click the button!")

def say_hi(event):
    message.text = "Hello there! 👋"

button = html.BUTTON("Say hi")
button.bind("click", say_hi)

screen.add(button)
screen.add(message)

Every time you click, Python runs your say_hi function. Try changing the message it shows.

A click counter

This one remembers how many times you have clicked.

from browser import html

clicks = 0
label = html.H2("Clicks: 0")

def clicked(event):
    global clicks
    clicks = clicks + 1
    label.text = "Clicks: " + str(clicks)

button = html.BUTTON("Click me!")
button.bind("click", clicked)

screen.add(label)
screen.add(button)

Ask the user a question

An html.INPUT() is a box the user can type into. Read what they typed with box.value.

from browser import html

box = html.INPUT()
box.placeholder = "your name"
greeting = html.H2("")

def greet(event):
    greeting.text = "Nice to meet you, " + box.value + "!"

button = html.BUTTON("Greet me")
button.bind("click", greet)

screen.add(box)
screen.add(button)
screen.add(greeting)

You can also add several pieces in one line: screen.add(box, button, greeting).

Roll the dice 🎲

You can mix in everything you already know — like random.

from browser import html
from random import randint

result = html.H1("🎲")

def roll(event):
    result.text = str(randint(1, 6))

button = html.BUTTON("Roll the dice")
button.bind("click", roll)

screen.add(result, button)

That’s the whole idea: build a piece, add it to the screen with screen.add(...), and make it react to clicks. From here you could build a quiz, a calculator, or a little game — all in the browser, no extra tools needed.

Curriculum	0.20260501.1
Tier	3
Curik	0.20260416.1
Theme	0.20260314.6
Hugo	0.164.0