Mantra pertamamu: tombol yang melakukan sesuatu

Tunjukkan pada saya: tiga langkah dari setiap mantra

Hampir semua yang dilakukan JavaScript pada suatu halaman mengikuti tiga langkah:

1. Temukan elemen di halaman (tombol, judul, gambar…),
2. mendengarkan suatu acara (satu klik, mengarahkan mouse, mengetik teks…),
3. lakukan sesuatu (ubah teks, warna, sembunyikan, tunjukkan…).

Berikut tampilannya dalam kode. Di HTML, tambahkan tombol dan paragraf:

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

Dan di 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! 🎉";
});

Mari kita uraikan hal-hal baru:

• id="my-button" – label nama untuk elemen, serupa dengan kelas, namun id hanya akan muncul satu kali pada laman. JavaScript menggunakannya untuk menemukan elemen.
• const – kotak dengan nama (variabel), tempat kita menyimpan elemen yang kita temukan. Lebih lanjut tentang variabel lain kali.
• document.getElementById("...") – “halaman, carikan saya elemen dengan id ini.”
• addEventListener("click", () => { ... }) – “saat terjadi klik, jalankan apa pun yang ada di dalam kurung kurawal.” Panah lucu () => {} disebut fungsi – paket kode yang dijalankan nanti.
• textContent – teks di dalam elemen. Saat kamu memberinya teks baru, teks tersebut akan langsung berubah di halaman.

Giliran kamu 💪

Tambahkan mantra pertama kamu ke situs web kamu. Pilih satu berdasarkan proyek kamu (atau buat sendiri):

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

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

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

<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! 😄";
});

<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! 🌊";
});

<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! 📣";
});

Bonus: tata tombol kamu dalam CSS agar terlihat bagus:

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;
}

Apa yang bisa diambil dari pelajaran ini

• Setiap mantra: temukan elemen → dengarkan acara → lakukan sesuatu.
• document.getElementById("id") menemukan elemen, addEventListener("click", () => {...}) menunggu klik.
• textContent mengubah teks elemen secara instan, tanpa memuat ulang halaman.

© 2026 Ing. Martin Polak / AlgoRhino · Ketentuan penggunaan konten