JavaScript · Web'e özel: butona tıklama — videolu atölye

Web'e özel: butona tıklama

DOM seçimi, durum ve olay dinleyicisini çalışan bir düğmede birleştirmek.

Kavramı kur

DOM, tarayıcının HTML belgesinden oluşturduğu programlanabilir yapıdır. querySelector uygun öğeyi bulur; bulamazsa null döndürür. Düğmenin kimliği ile seçicinin eşleşmesi gerekir. Kodu öğe oluşturulduktan sonra çalıştırmak için bu küçük örnekte script bölümünü düğmenin altına yerleştiriyoruz.

Neden böyle çalışıyor?

Bir olay dinleyicisi, tıklama gerçekleştiğinde ne yapılacağını tanımlar. Fonksiyonu dinleyiciye vermek ile o anda çağırmak aynı şey değildir. sayi, tıklamalar arasında saklanan durumdur; her olayda bir artar ve textContent ile arayüze yansıtılır. Metin içeriği için innerHTML kullanmak gerekmez.

Çalışma sırası

Kullanıcı etkileşimini yalnızca fareye göre düşünme. Gerçek button öğesi klavyeyle de kullanılabilir ve doğru temel semantiğe sahiptir. Düğmeyi Tab ile seçip Enter veya Space ile dene. Bir div üzerine tıklama koymak aynı davranışları otomatik sağlamaz.

İkinci örnek · 1

querySelector doğru id ile tek düğmeyi seçer. Kodun tamamı yazılı derste bulunur.

<button id="sayac">0 kez tıklandı</button>
<script>
const dugme = document.querySelector("#sayac");
let sayi = 0;
dugme.addEventListener("click", () => {
  sayi += 1;
  dugme.textContent = sayi + " kez tıklandı";
});
</script>

Beklenen sonucu oku

textContent yeni durumu düğme metnine güvenli biçimde yansıtır.

Beklenen: Başlangıçta 0; her tıklamada 1, 2, 3 kez tıklandı.

Bir değeri sen değiştir

Düğmeye üç kez bas; değerleri gözlemle. Bir sıfırlama düğmesi ekle ve aynı durumu 0 yap.

Hata nereden gelir?

Seçici yanlışsa null üzerinde metot çağırırsın; id ve çalışma sırasını kontrol et.

Kendi çözümünü kur

Fare kullanmadan her iki düğmeyi de çalıştır; odak göstergesini kaybetme. Sıfırla düğmesinin olayında hem sayi değerini hem görünen metni güncelle.

Çözüm varyasyonu · 1

Önce kendi denemeni yap; sonra bu varyasyonun girdileri ile sonucunu karşılaştır.

<button id="artir">Artır</button><button id="sifirla">Sıfırla</button><p id="deger">0</p>
<script>
let sayi = 0;
const sonuc = document.querySelector("#deger");
document.querySelector("#artir").addEventListener("click", () => { sonuc.textContent = ++sayi; });
document.querySelector("#sifirla").addEventListener("click", () => { sayi = 0; sonuc.textContent = sayi; });
</script>

Kendini kontrol et

Sayaç neden olay fonksiyonunun dışında tanımlanır? Yanıt: Tıklamalar arasında değerini koruması için; her olayda yeniden başlatılmaması gerekir.

Beklenen: Artır sayacı artırır; Sıfırla hem durumu hem görünümü 0 yapar.