- Konu sahibi
- #1
İşlem yapmak için butona bir olay dinleyicisi eklemeniz gerekir. En yaygın yöntem, JavaScript’te
Aşağıdaki örnekte kullanıcı butona tıkladığında sayfadaki mesaj değişir:
Burada
Kodun çalışması için JavaScript’in, buton ve paragraf HTML olarak oluşturulduktan sonra çalışması gerekir.
Tıklama işlevinin içindeki kodu değiştirerek butonun davranışını belirleyebilirsiniz. Örneğin bir sayıyı artırmak için:
İlk durumda ekranda
Kısa örneklerde olay işlevini doğrudan HTML içinde de yazabilirsiniz:
Bu yöntem çalışsa da HTML ile JavaScript’i birbirine bağladığı için büyüyen projelerde genellikle önerilmez.
Buton bir
Form içindeki işlem için yalnızca butonun
addEventListener('click', ...) kullanmaktır. Kullanıcı butona bastığında tanımladığınız işlev çalışır ve istediğiniz işlem, örneğin metin değiştirme, hesaplama yapma veya sunucuya istek gönderme, bu işlevin içinde gerçekleştirilir.Buton tıklamasını dinleme
Aşağıdaki örnekte kullanıcı butona tıkladığında sayfadaki mesaj değişir:
HTML:
<button id="mesajButonu">Tıkla</button>
<p id="mesaj">Henüz tıklanmadı.</p>
<script>
const buton = document.getElementById('mesajButonu');
const mesaj = document.getElementById('mesaj');
buton.addEventListener('click', function () {
mesaj.textContent = 'Butona tıklandı.';
});
</script>Burada
getElementById() verilen kimliğe sahip HTML öğesini bulur. addEventListener('click', ...) ise butonun tıklanmasını bekler. Tıklama gerçekleştiğinde süslü parantezler arasındaki kod çalışır ve textContent özelliği paragrafın yazısını değiştirir.Kodun çalışması için JavaScript’in, buton ve paragraf HTML olarak oluşturulduktan sonra çalışması gerekir.
script etiketini bu örnekte olduğu gibi HTML öğelerinin altına yerleştirebilir veya JavaScript dosyasını sayfanın sonunda yükleyebilirsiniz. Kod daha önce çalışırsa getElementById() öğeyi bulamayabilir ve tıklama dinleyicisi eklenemez.Tıklamada farklı işlemler yapmak
Tıklama işlevinin içindeki kodu değiştirerek butonun davranışını belirleyebilirsiniz. Örneğin bir sayıyı artırmak için:
HTML:
<button id="artirButonu">Artır</button>
<p>Toplam: <span id="toplam">0</span></p>
<script>
const artirButonu = document.getElementById('artirButonu');
const toplamAlani = document.getElementById('toplam');
let toplam = 0;
artirButonu.addEventListener('click', function () {
toplam = toplam + 1;
toplamAlani.textContent = toplam;
});
</script>İlk durumda ekranda
Toplam: 0 görünür. Her tıklamada click olayı yeniden çalışır, toplam değişkeni bir artar ve ekrandaki değer güncellenir. Değer artmıyorsa önce butonun kimliğinin JavaScript’teki getElementById() çağrısıyla aynı olduğunu, ardından JavaScript dosyasının gerçekten yüklendiğini kontrol edin.Kısa örneklerde olay işlevini doğrudan HTML içinde de yazabilirsiniz:
HTML:
<button onclick="alert('Butona tıklandı.')">Tıkla</button>Bu yöntem çalışsa da HTML ile JavaScript’i birbirine bağladığı için büyüyen projelerde genellikle önerilmez.
addEventListener() kullanıldığında davranış JavaScript dosyasında tutulur; aynı butona farklı olaylar eklemek ve kodu daha sonra değiştirmek kolaylaşır.Form butonlarında dikkat edilmesi gereken durum
Buton bir
form içinde bulunuyorsa varsayılan olarak formu gönderebilir ve sayfa yenilenebilir. Tıklama sırasında yalnızca JavaScript işlemi yapmak istiyorsanız olay nesnesindeki preventDefault() yöntemini çağırmanız gerekir:
HTML:
<form id="kayitFormu">
<input id="ad" type="text" placeholder="Adınızı yazın" required>
<button type="submit">Kaydet</button>
</form>
<p id="sonuc"></p>
<script>
const form = document.getElementById('kayitFormu');
const sonuc = document.getElementById('sonuc');
form.addEventListener('submit', function (olay) {
olay.preventDefault();
const ad = document.getElementById('ad').value.trim();
sonuc.textContent = ad + ' adlı kayıt hazırlandı.';
});
</script>Form içindeki işlem için yalnızca butonun
click olayını değil, formun submit olayını dinlemek daha güvenlidir. Böylece kullanıcı butona tıklamak yerine Enter tuşuna bastığında da aynı işlem çalışır. preventDefault() çağrısı formun normal gönderimini durdurur; bu örnekte veriler bir sunucuya kaydedilmez, yalnızca sayfada mesaj gösterilir. Gerçek kayıt gerekiyorsa aynı işlevin içinde fetch() ile sunucuya istek gönderip başarılı veya hatalı yanıtı ayrıca kontrol etmeniz gerekir.