Emre

Emre

WFN Üye
Konular
1,714
Mesajlar
1,810
Çözüm
0
Ticaret Puanı
0
Üyelik
9 Ay 5 Gün
Konum
Samsun
Web Sitesi
Var
Alanı
WordPress Uzm.
1/1
Konu sahibi
Bir input alanının güncel değerini almak için önce JavaScript ile alanı seçin, ardından .value özelliğini okuyun. Örneğin document.getElementById('ad').value, kimliği ad olan alandaki o anki metni verir. Değeri kullanıcı yazdıktan sonra okumak için bu işlemi bir düğme tıklaması veya form gönderimi gibi bir olayın içinde yapabilirsiniz.

Düğmeye basıldığında değeri alın​


Aşağıdaki örneği bir HTML dosyasına kaydedip tarayıcıda açın. Alana bir ad yazıp düğmeye bastığınızda, girilen değer sayfada görüntülenir.

HTML: 
<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="utf-8">
  <title>Input değeri örneği</title>
</head>
<body>
  <label for="ad">Adınız:</label>
  <input id="ad" type="text">
  <button id="goster" type="button">Göster</button>
  <p id="sonuc"></p>

  <script>
    const alan = document.getElementById('ad');
    const sonuc = document.getElementById('sonuc');

    document.getElementById('goster').addEventListener('click', function () {
      const deger = alan.value.trim();

      if (deger === '') {
        sonuc.textContent = 'Lütfen bir ad girin.';
        return;
      }

      sonuc.textContent = 'Girilen ad: ' + deger;
    });
  </script>
</body>
</html>

Örneğin alana Deniz yazıp düğmeye bastığınızda Girilen ad: Deniz görünür. trim(), alınan metnin başındaki ve sonundaki boşlukları kaldırır; alanı değiştirmez. Alan boşsa veya yalnızca boşluk içeriyorsa örnek bir uyarı gösterir.

Değer, düğmeye her basıldığında yeniden okunur. JavaScript kodunun alanlardan sonra yerleştirilmesi, kod çalıştığında örnekteki öğelerin sayfada bulunmasını sağlar. Kendi sayfanızda null ile ilgili bir hata alırsanız id değerinin HTML ile birebir eşleştiğini ve kodun öğe oluşturulduktan sonra çalıştığını kontrol edin.

Yazarken güncel değeri izleyin​


Düğme beklemek yerine kullanıcı metni değiştirdikçe değere erişmek için input olayını dinleyebilirsiniz. Önceki örnekte düğmenin olay dinleyicisi yerine şu kodu kullanın:

JavaScript: 
alan.addEventListener('input', function () {
  sonuc.textContent = 'Girilen ad: ' + alan.value;
});

Bu sürümde değer kullanıcı yazdıkça gösterilir; baştaki veya sondaki boşluklar kaldırılmaz. Bu yöntem değeri yalnızca sayfada kullanır, kendiliğinden sunucuya göndermez veya kaydetmez.

Sayı ve seçim alanlarında ne değişir?​


.value bir metin döndürür; type="number" alanında bile 42 değeri metin olarak alınır. Hesaplama yapacaksanız sayı alanında alan.valueAsNumber kullanabilirsiniz. Alan boşsa veya sayı olarak okunamıyorsa sonuç NaN olur; işlemeden önce Number.isNaN(sayi) ile bu durumu ayırın. Değerin sayı olması, uygulamanızın kabul ettiği aralıkta olduğunu tek başına göstermez.

Onay kutusu veya radyo düğmesinde .value, seçili olma durumunu değil, alanın değerini verir. İşaretli olup olmadığını öğrenmek için alan.checked kullanın; sonuç true veya false olur.
 

Sende şimdi bize katılmak ister misin?

Kayıt ol

Bize katılım kolay ve ücretsizdir!

Üye ol
Foruma git ?

Bu konuyu görüntüleyen kullanıcılar

Bu konuyu şu anda görüntüleyen üye bulunmuyor.
Robotlar:
  • Anthropic
Toplam: 1 (Üye: 0, misafir: 0, robot: 1)