|
Kullanıcının bir metin kutusuna (örneğin <input type="text">) girdiği değeri almak için kullanılan yaygın JavaScript yöntemleri şunlardır:
getElementById() ile Değer Alma
Bu yöntem, belirli bir id'ye sahip elementi seçer ve value özelliğini kullanarak metin kutusundaki değeri alır.
<input type="text" id="myInput" placeholder="Adınızı girin">
<button onclick="getValue()">Değeri Al</button>
<script>
function getValue() {
const inputValue = document.getElementById('myInput').value;
console.log('Girdiğiniz değer:', inputValue);
}
</script>
document.getElementById('myInput'): id="myInput" olan öğeyi seçer.
.value: Metin kutusundaki değeri alır.
querySelector() ile Değer Alma
Bu yöntem, bir CSS seçici kullanarak herhangi bir öğeyi seçmek için kullanılır.
<input type="text" class="user-input" placeholder="Adınızı girin">
<button onclick="getValue()">Değeri Al</button>
<script>
function getValue() {
const inputValue = document.querySelector('.user-input').value;
console.log('Girdiğiniz değer:', inputValue);
}
</script>
document.querySelector('.user-input'): CSS sınıfı user-input olan ilk öğeyi seçer.
.value: Metin kutusundaki değeri alır.
Not: querySelector kullanımı, sınıf, id veya diğer CSS seçicileriyle daha esnek bir seçim sağlar.
getElementsByClassName() ile Değer Alma
Bu yöntem, birden fazla öğeyi seçmek için kullanılır. Ancak getElementsByClassName bir HTMLCollection (dizi benzeri bir liste) döndürür, bu yüzden indeks ile belirli bir öğeye erişilmelidir.
<input type="text" class="user-input" placeholder="Adınızı girin">
<button onclick="getValue()">Değeri Al</button>
<script>
function getValue() {
const inputValue =
document.getElementsByClassName('user-input')[0].value;
console.log('Girdiğiniz değer:', inputValue);
}
</script>
document.getElementsByClassName('user-input'): Tüm class="user-input" olan öğeleri bir HTMLCollection olarak döndürür.
[0]: İlk öğeyi seçer.
.value: Metin kutusundaki değeri alır.
Not: Birden fazla aynı sınıf adı varsa, bunların ilkini [0] ile alabilirsiniz.
addEventListener() ile Değer Alma (Dinamik Yöntem)
Bu yöntem, metin kutusundaki değişiklikleri algılar ve değeri otomatik olarak alır.
<input type="text" id="dynamicInput" placeholder="Adınızı girin">
<script>
const inputElement = document.getElementById('dynamicInput');
inputElement.addEventListener('input', function() {
console.log('Girdiğiniz değer:', inputElement.value);
});
</script>
addEventListener('input', callback): Her veri girişi olduğunda çalışır.
inputElement.value: Mevcut değeri her giriş anında günceller.
Not: input olayı, her tuşa basıldığında veya değer değiştiğinde tetiklenir.
this.value ile Değer Alma (Doğrudan Yöntem)
Bu yöntem, HTML onclick veya oninput olayı ile doğrudan this.value kullanılarak değeri alır.
<input type="text" oninput="getValue(this)"
placeholder="Adınızı girin">
<script>
function getValue(input) {
console.log('Girdiğiniz değer:', input.value);
}
</script>
this: Olayın gerçekleştiği öğeyi temsil eder.
this.value: O öğedeki değeri alır.
Not: Bu yöntem doğrudan HTML'deki olay işleyicileriyle kullanılır ve fazladan seçim yapmayı gerektirmez.
form ile Değer Alma (Birden Fazla Değer)
Form içindeki tüm girişleri FormData kullanarak almak mümkündür.
<form id="myForm">
<input type="text" name="username" placeholder="Kullanıcı Adı">
<input type="password" name="password" placeholder="Şifre">
<button type="button" onclick="getFormData()">
Form Verilerini Al</button>
</form>
<script>
function getFormData() {
const formElement = document.getElementById('myForm');
const formData = new FormData(formElement);
for (const [key, value] of formData.entries()) {
console.log(`${key}: ${value}`);
}
}
</script>
new FormData(form): Formdaki tüm girişlerin verilerini alır.
formData.entries(): Her form girişinin key ve value ikilisini verir.
Özet
Yöntem Kullanım Açıklama
getElementById document.getElementById() Tek bir öğeyi ID ile seçer.
querySelector document.querySelector() CSS seçicilerle öğe seçer.
getElementsByClassName document.getElementsByClassName() Class ile seçer (indeks gerekir).
addEventListener addEventListener('input') Dinamik veri girişini algılar.
this.value oninput="getValue(this)" Doğrudan olaydan değer alır.
FormData new FormData(form) Form verilerini toplar.
Eğer sadece tek bir metin kutusunun değerini alacaksanız, en sık kullanılan yöntemler:
getElementById() (en yaygın)
querySelector() (daha esnek)
addEventListener() (dinamik veri girişleri için)
Bu yöntemlerin her biri farklı durumlarda faydalı olabilir. Eğer sadece basit bir metin kutusu işlemi yapacaksanız getElementById yeterli olur. Daha karmaşık formlar ve dinamik işlemler için querySelector, addEventListener ve FormData daha kullanışlıdır.
|