Yorum formu iskeleti
addEventListener ve DOM ile yorum formunu oluşturursun.
Form iskeleti
Yorum formunda bir textarea ve bir submit butonu var. JavaScript ile formun submit olayını dinleyip varsayılan davranışı engelleyeceğiz; böylece sayfa yeniden yüklenmeden yorumu yakalayabiliriz.
addEventListener("submit", ...) form gönderildiğinde çalışır. event.preventDefault() sayfanın yeniden yüklenmesini durdurur ve işleyicinin kendi mantığını çalıştırmasına izin verir.
İşleyici içinde commentForm.querySelector("#commentText") ile textarea'yı bulup .value ile kullanıcının yazdığı metni okuruz.
Input değerini okuma
Form işleyici içinde querySelector ile textarea öğesini seçeriz. .value özelliği kullanıcının yazdığı metni verir; boş bırakılırsa boş dize döner.
Örnek: const text = commentInput.value; satırı ile metni bir değişkene alırız. Bu değişkeni sonra güvenli render işlevine aktaracağız.
Okunan metni renderComment işlevine göndereceğiz; bu işlevi sonraki derslerde yazacağız ve metni güvenli şekilde ekrana koyacak.
Uygulama Submit dinleyici ekle
commentForm için submit olayını dinleyen bir işleyici ekle. İşleyici içinde event.preventDefault() çağır, #commentText input'unu bul, .value ile metni oku ve renderComment(text) çağır.
Örnek çözümü göster
commentForm.addEventListener("submit", (event) => {
event.preventDefault();
const commentInput = commentForm.querySelector("#commentText");
const text = commentInput.value;
renderComment(text);
});Kendini test et
-
Olay dinleyici ekle
commentForm.addEventListener("____", (event) => { event.preventDefault(); });Cevabı göster
commentForm.addEventListener("submit", (event) => { event.preventDefault(); }); -
preventDefault ne yapar?
event.preventDefault();- Olayın varsayılan davranışını engeller
- Sayfayı yeniden yükler
- Formu temizler
- Olayı tetikler
Cevabı göster
Olayın varsayılan davranışını engeller — Doğru! preventDefault varsayılan davranışı (sayfa yenileme) engeller.
-
Form yöntemlerini eşleştir
- addEventListener
- Olay dinleyici ekle
- preventDefault
- Varsayılan davranışı engelle
- querySelector
- Öğe seç
- value
- Input metnini al