Phép thuật đầu tiên: nút bấm làm được việc

Trang phản ứng với cú click lần đầu tiên. Bạn sẽ học cách tìm phần tử và lắng nghe sự kiện.

Xem này: ba bước của mọi phép thuật

Hầu hết mọi thứ JavaScript làm trên trang đều theo ba bước:

Tìm một phần tử trên trang (nút, tiêu đề, hình ảnh…),
lắng nghe sự kiện (click, di chuột, gõ chữ…),
làm gì đó (đổi chữ, đổi màu, ẩn, hiện…).

Đây là cách nó trông trong code. Trong HTML, thêm một nút và một đoạn văn:

<button id="my-button">Click me</button>
<p id="greeting">Nothing has happened yet.</p>

Và trong script.js:

// 1. Find the elements by their id
const myButton = document.getElementById("my-button");
const greeting = document.getElementById("greeting");

// 2. Listen for a click on the button
myButton.addEventListener("click", () => {
  // 3. Do something: change the paragraph's text
  greeting.textContent = "The spell works! 🎉";
});

Hãy giải thích những thứ mới:

id="my-button" – nhãn tên cho phần tử, giống class nhưng id chỉ nên xuất hiện một lần trên trang. JavaScript dùng nó để tìm phần tử.
const – hộp có tên (biến), nơi ta lưu phần tử vừa tìm được. Sẽ nói thêm về biến ở bài sau.
document.getElementById("...") – “trang ơi, tìm cho tôi phần tử có id này.”
addEventListener("click", () => { ... }) – “khi có click, chạy những gì bên trong dấu ngoặc nhọn.” Mũi tên kỳ lạ () => {} gọi là function – gói code chạy sau này.
textContent – chữ bên trong phần tử. Khi gán chữ mới, nó đổi trên trang ngay lập tức.

Đến lượt bạn 💪

Thêm phép thuật đầu tiên vào website. Chọn một cái theo dự án của bạn (hoặc tự nghĩ ra):

🏫 Website trường – nút "Hôm nay ăn gì?"

HTML (trên trang chủ):

<button id="lunch-button">What's for lunch today?</button>
<p id="lunch"></p>

script.js:

const lunchButton = document.getElementById("lunch-button");
const lunch = document.getElementById("lunch");

lunchButton.addEventListener("click", () => {
  lunch.textContent = "Today: pizza and salad! 🍕";
});

🙋 Website cá nhân – nút "Kể chuyện cười đi"

<button id="joke-button">Tell me a joke</button>
<p id="joke"></p>

const jokeButton = document.getElementById("joke-button");
const joke = document.getElementById("joke");

jokeButton.addEventListener("click", () => {
  joke.textContent = "Why do programmers prefer dark mode? Because light attracts bugs! 😄";
});

🌍 Nhật ký du lịch – nút "Lần sau đi đâu?"

<button id="where-button">Where are we going next?</button>
<p id="where"></p>

const whereButton = document.getElementById("where-button");
const where = document.getElementById("where");

whereButton.addEventListener("click", () => {
  where.textContent = "Packing our bags: we're headed to the beach in Greece! 🌊";
});

⚽ Website câu lạc bộ – nút "Trận sau khi nào?"

<button id="match-button">When's the next match?</button>
<p id="match"></p>

const matchButton = document.getElementById("match-button");
const match = document.getElementById("match");

matchButton.addEventListener("click", () => {
  match.textContent = "Saturday at 10:00, home game vs. Riverside. Come cheer us on! 📣";
});

Thêm: tô màu nút bằng CSS cho đẹp:

button {
  font-size: 16px;
  font-weight: bold;
  padding: 10px 20px;
  border: none;
  border-radius: 999px;
  background-color: #1d4ed8;
  color: white;
  cursor: pointer;
}

button:hover {
  background-color: #1e40af;
}

⚠️

Không chạy? Mở console (F12). Lỗi hay gặp nhất: 1) id trong HTML không khớp chính xác tên trong getElementById (cả chữ hoa chữ thường cũng quan trọng), 2) <script> không ở cuối <body>, 3) thiếu dấu ngoặc – console sẽ báo số dòng.

✅

Tự kiểm tra: Bạn bấm nút và chữ xuất hiện trên trang. Bạn vừa nối cả ba ngôn ngữ của web: HTML (nút), CSS (giao diện), và JavaScript (hành vi).

Điều cần nhớ từ bài học này

Mọi phép thuật: tìm phần tử → lắng nghe sự kiện → làm gì đó.
document.getElementById("id") tìm phần tử, addEventListener("click", () => {...}) chờ click.
textContent đổi chữ của phần tử ngay lập tức, không cần tải lại trang.