Twoje pierwsze zaklęcie: przycisk, który coś robi

Strona po raz pierwszy zareaguje na kliknięcie. Nauczysz się znaleźć element i nasłuchiwać zdarzeń.

Pokażę ci: trzy kroki każdego zaklęcia

Prawie wszystko, co JavaScript robi na stronie, ma trzy kroki:

Znajdź element na stronie (przycisk, nagłówek, obrazek…),
nasłuchuj zdarzenia (kliknięcie, najechanie myszką, wpisanie tekstu…),
zrób coś (zmień tekst, kolor, ukryj, pokaż…).

Tak to wygląda w kodzie. W HTML dodaj przycisk i akapit:

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

A w 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! 🎉";
});

Rozłóżmy nowości na czynniki pierwsze:

id="my-button" – etykieta elementu, podobna do klasy, ale id powinno pojawić się na stronie tylko raz. JavaScript dzięki niej znajduje element.
const – pudełko z nazwą (zmienna), w którym trzymamy znaleziony element. O zmiennych więcej następnym razem.
document.getElementById("...") – „strono, znajdź mi element z tym id”.
addEventListener("click", () => { ... }) – „gdy nastąpi kliknięcie, uruchom to, co jest w klamrach”. Ta zabawna strzałka () => {} to funkcja – paczka kodu, która odpali się później.
textContent – tekst wewnątrz elementu. Gdy przypiszesz mu nowy tekst, na stronie zmienia się od razu.

Teraz ty 💪

Dodaj na swoją stronę pierwsze zaklęcie. Wybierz według projektu (albo wymyśl własne):

🏫 Strona mojej szkoły – przycisk „Co jest dziś na obiad?"

HTML (na stronie głównej):

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

🙋 Moja strona osobista – przycisk „Opowiedz żart"

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

🌍 Dziennik podróży – przycisk „Dokąd jedziemy następnym razem?"

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

⚽ Strona klubu sportowego – przycisk „Kiedy następny mecz?"

<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: ostyluj przycisk w CSS, żeby wyglądał ładnie:

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

⚠️

Nie działa? Otwórz konsolę (F12). Najczęstsze błędy: 1) id w HTML nie zgadza się dokładnie z nazwą w getElementById (nawet wielkość liter ma znaczenie), 2) <script> nie jest na samym końcu <body>, 3) brakujący nawias – konsola podpowie numer linii.

✅

Sprawdź się: Klikasz przycisk i na stronie pojawia się tekst. Właśnie połączyłeś wszystkie trzy języki sieci: HTML (przycisk), CSS (wygląd) i JavaScript (zachowanie).

Co wyniesiesz z tej lekcji

Każde zaklęcie: znajdź element → nasłuchuj zdarzenia → zrób coś.
document.getElementById("id") znajduje element, addEventListener("click", () => {...}) czeka na kliknięcie.
textContent zmienia tekst elementu od razu, bez odświeżania strony.