javascript
14 minLearning in PidginButtons and the DOM
Make a button wey dey greet Ada's customers when dem press am.
What you'll learn
- Get an element with getElementById
- Listen for clicks with addEventListener
- Change text with innerText
Before you start
- functions
Ada wan make her page greet customers. When somebody press di button, di page go change. To do dis, we need to understand di DOM.
Wetin be di DOM?
Di DOM (Document Object Model) na di browser's picture of your page. JavaScript fit see and change any element for di page through am.
Step by step
let button = document.getElementById("greet");
let message = document.getElementById("message");
button.addEventListener("click", function () {
message.innerText = "Welcome, customer!";
});getElementById— find di element with that idaddEventListener("click", ...)— do something when di button get pressedinnerText— change di text inside di element
For di playground, put dis button for your HTML: <button id="greet">Press me</button> and a <p id="message"></p>. Press di button and watch di message appear!
Try it yourself
Greeting button (HTML + JS)
Open in playground →html
<button id="greet">Press me</button>
<p id="message"></p>
<script>
let button = document.getElementById("greet");
let message = document.getElementById("message");
button.addEventListener("click", function () {
message.innerText = "Welcome, customer!";
});
</script>Practice exercises
Exercise 1: Console greeting
Print 'Hello, Ada!' with console.log.
Preview
Console
No output yet. Click Run.
Code runs in your browser only — nothing is sent to the server.