JavaScript butonum neden çalışmıyor? DOM ve olay kontrolü

Bir butona basınca yazının değişmesi küçük ama önemli bir etkileşimdir. Öğeyi seçmek, olay dinlemek ve çıktıyı güncellemek arasındaki farkı bu örnekle görebilirsin. Kullanıcının yazdığını HTML olarak yorumlamamak da aynı anda öğrenilebilecek yararlı bir alışkanlıktır.

Önce neyi çözmek istediğini belirle

Bir düğmeyle metin güncelleyerek DOM seçimi, olay ve çıktı adımlarını birleştireceğiz. Hedef yalnızca tıklama olduğunda çalışan, öğe eksikse anlaşılabilen küçük bir özellik kurmaktır.

Adım adım uygula

1 Öğeleri doğru seç. querySelector ilk eşleşeni bulur; bulamazsa null verir. Betiğin HTML’den sonra çalışmasını sağla veya defer kullan.
2 Olayı bağla. addEventListener ile click olayına bir fonksiyon ver. Fonksiyonu bağlarken fn() diye çağırmak yerine fn referansını kullan.
3 Metin olarak göster. Kullanıcı girdisini textContent ile yaz. innerHTML kullanmak metni HTML olarak yorumlar; güvenilmeyen girdide sakıncalıdır.

Küçük bir örnek

JavaScript

const buton = document.querySelector("#goster");
const sonuc = document.querySelector("#sonuc");
if (buton && sonuc) {
  buton.addEventListener("click", () => {
    sonuc.textContent = "Merhaba!";
  });
}

Sık takılınan nokta

Kod sayfa açılır açılmaz çalışıyorsa işleyiciyi bağlamak yerine fonksiyonu hemen çağırmış olabilirsin. Bir düğme form içindeyse varsayılan gönderim davranışı da sayfayı yenileyebilir; amacına göre type="button" kullan.

Şimdi kendin dene

Bir ad alanı ekle. Kullanıcı adını yazıp düğmeye basınca “Merhaba Ada” göster. Ardından ada bir HTML etiketi yazıp bunun yalnızca metin olarak göründüğünü doğrula.

Bir sonraki adım JavaScript değişken ve buton örnekleri →

Sık Karşılaşılan Hatalar, Nedenleri ve Hızlı Çözüm Tablosu

JavaScript butonum neden çalışmıyor? DOM ve olay kontrolü konusunu kendi projende uygularken en sık karşılaşılan durumları ve çözüm adımlarını aşağıdaki tabloda bulabilirsin:

Belirti / Sorun	Temel Nedeni	Nasıl Teşhis Edilir?	Kesin Çözüm
Değişiklik ekrana yansımıyor	Dosya kaydedilmemiş veya tarayıcı eski önbelleği gösteriyor	Editörde dosya adının yanında nokta işareti var mı bak	`Ctrl+S` / `Cmd+S` ile kaydet ve `Ctrl+F5` ile yenile
Büyük/küçük harf veya yol hatası	Dosya adı, seçici (`id`/`class`) veya değişken adı birebir eşleşmiyor	Konsol (F12) veya terminaldeki satır numarasını kontrol et	Türkçe karakter ve boşluk içermeyen küçük harfli adlandırma kullan
Tür veya Boş Değer (`null`/`None`) Hatası	Henüz oluşmamış bir HTML elemanına veya metin (`string`) tipindeki sayıya işlem yapmak	`console.log(typeof x)` veya `print(type(x))` ile türü yazdır	İşlem öncesi değerin varlığını (`if`) ve tür dönüşümünü (`Number`/`int`) doğrula
Ortam / Paket Uyuşmazlığı	Terminalde farklı bir klasörde veya sanal ortam dışındayken komut çalıştırmak	`pwd` (veya `cd`) ve `which python` ile konumu gör	Proje kök klasöründe doğru sanal ortamı etkinleştirerek çalıştır

Adım Adım Hata Ayıklama (Debugging) ve Temiz Kod Kontrol Listesi

1. Sorunu En Küçük Örnekte İzole Et: 200 satırlık kodda hata aramak yerine, yalnızca takıldığın satırı 5-10 satırlık küçük bir deneme alanında (Tarayıcıda Kod Dene sayfasında) tek başına çalıştır.
2. Varsayma, Konsola Yazdır: "Bu değişkenin içinde kesin 10 vardır" diye düşünmek yerine, işlemden hemen önce değişkenin değerini ve tipini ekrana yazdırarak gözünle doğrula.
3. Tek Seferde Tek Değişiklik Yap: Aynı anda hem HTML yapısını, hem CSS sınıfını hem de JavaScript fonksiyonunu değiştirirsen sorunun hangisinden kaynaklandığını bulamazsın.
4. Sınır Değerleri Test Et: Kodun normal bir girdide çalıştığında hemen bırakma; boş girdi (`""`), sıfır (`0`) veya beklenmeyen bir değer girildiğinde nasıl davrandığını da kontrol et.

Sıkça Sorulan Sorular (SSS)

Hata mesajları İngilizce olduğu için anlamakta zorlanıyorum, ne yapmalıyım? +

Hata mesajının tamamını ezberlemene gerek yoktur; yalnızca üç bilgiye odaklan: 1) Dosya adı ve satır numarası, 2) Hatanın türü (ör. SyntaxError, TypeError), 3) En sondaki kısa açıklama. Webino App'in 52 Yazılım Hatası ve Çözümü sözlüğünden Türkçe karşılıklarına anında bakabilirsin.

Bilgisayarıma program kurmadan bu örnekleri hemen deneyebilir miyim? +

Evet. Sol menüdeki Tarayıcıda Kod Dene laboratuvarını kullanarak HTML/CSS, JavaScript, Python ve SQL kodlarını hiçbir kurulum yapmadan doğrudan tarayıcında çalıştırabilirsin.

Kaynak ve devamı

Resmi belgeleri aç ↗

Webino App denemesi: Yanlış seçiciyi düzeltip butona bastık

Buton aynı kaldı; önce bulunmayan bir id seçildi, sonra gerçek id ile olay bağlandı. Gerçek tıklama sonrasında sayaç ölçüldü. Her çalışmayan butonun nedeni seçici değildir; yüklenme zamanı ve diğer hatalar da incelenmelidir.