Lesson 8: DOM and Events

Learning Goals

• Select elements with getElementById.
• Listen for a click event.
• Change text on the page.

HTML + JavaScript Example

<button id="enrollBtn">Enroll</button>
<p id="statusText">Not enrolled</p>

let enrollBtn = document.getElementById("enrollBtn");
let statusText = document.getElementById("statusText");

enrollBtn.addEventListener("click", function () {
  statusText.textContent = "Enrollment complete";
});

Practice

1. Create a button that changes heading text when clicked.
2. Create a button that changes text color.
3. Create two buttons: one says "Show", another says "Hide".

Homework

Build a small "Like" button that increases a number each click.

let likeBtn = document.getElementById("likeBtn");
let countText = document.getElementById("countText");
let count = 0;

likeBtn.addEventListener("click", function () {
  count = count + 1;
  countText.textContent = "Likes: " + count;
});