Atrybut onclick w JavaScript

Atrybut onclick w JavaScript

onclick to atrybut zdarzenia HTML, który pozwala uruchomić kod JavaScript po kliknięciu danego elementu, np. przycisku. W zadaniach egzaminacyjnych często występuje w połączeniu z funkcją zdefiniowaną w skrypcie.

Składnia

<button onclick="nazwaFunkcji()">Tekst przycisku</button>

Jeżeli w kodzie istnieje funkcja:

<script>
function dodaj() {
  // instrukcje dodawania
}
</script>

to poprawne wywołanie jej po kliknięciu przycisku wygląda tak:

<button onclick="return dodaj()">dodaj</button>

Co oznacza return?

Słowo return przed wywołaniem funkcji bywa stosowane szczególnie w formularzach. Jeśli funkcja zwróci false, może zablokować domyślne działanie elementu, np. wysłanie formularza. W prostych przyciskach często spotyka się też zapis bez return:

<button onclick="dodaj()">dodaj</button>

Typowe błędy egzaminacyjne

• użycie złego zdarzenia, np. onselect zamiast onclick,
• literówka w nazwie funkcji, np. obliczj() zamiast dodaj(),
• inny tekst przycisku niż wymagany w treści zadania,
• brak nawiasów przy wywołaniu funkcji.

Przykład

<input type="text" id="a">
<input type="text" id="b">
<button onclick="return dodaj()">dodaj</button>

<script>
function dodaj() {
  let x = Number(document.getElementById("a").value);
  let y = Number(document.getElementById("b").value);
  alert(x + y);
}
</script>

Najważniejsze: jeśli operacja ma wykonać się po naciśnięciu przycisku, należy użyć zdarzenia onclick i podać poprawną nazwę funkcji.