Butonlar sayfa tasarımlarında önemlidir. Etkileşimli bir sayfa oluşturmak istiyorsak buton kullanmamız kaçınılmaz olacaktır. Bir buton oluştururken onun üzerine bir yazı yazarız, mesela Üye Girişi gibi. Sonrasında bu yazının, Üye Çıkışı şeklinde değiştirilmesi gerekebilir. Bir butonun üzerindeki yazıyı JavaScript kullanarak nasıl değiştirebiliriz? Aslında tahmin ettiğiniz gibi çok kolay. Gelin şimdi bu konuyu inceleyelim.
JavaScript Element textContent Özelliğini Kullanma
Öncelikle çalışma ortamımızı hazırlayalım.
<html>
<head>
<title>Buton Yazısını JavaScript İle Nasıl Değiştiririz</title>
</head>
<body>
<h1>JavaScript Etkileşim Demektir</h1>
<p>Bu uygulamamızda bir butona tıkladığımızda buton üzerindeki yazıyı değiştireciğiz.</p>
<button id='girisBtn' onClick='yaziyiDegistir()'>Butona Tıkla</button>
<script>
const btnDOM = document.getElementById('girisBtn');
let sayac = 0;
function yaziyiDegistir() {
sayac += 1;
btnDOM.textContent = `Butona Tıkla - ${sayac}`;
}
</script>
</body>
</html>
İlk yapacağımız örnekte butona tıkladığımızda bir sayaç çalıştıracağız ve sonucu buton üzerine yazdıracak. Öncelikle yukardaki kodu bir sayfaya yazarak html dosyası olarak kayıt edin, sonrasında sayfayı açıp butona tıklayın. Nasıl çalıştığını göreceksiniz. Yazdığımız kodu incelersek:
- Önce bir buton (düğme) oluşturduk.
- Düğmeye tıklandığında yaziyiDegistir fonksiyonunu çalıştırmak için onClick eventini kullandık. — Kısa JavaScript kodunda önce btnDOM ismi ile belgedeki butonu bulduk. — Sayacı ilk kulanım için sıfırladık.
let sayac=0; - yaziyiDegistir fonksiyonumuzda ilk olarak sayacı artırdık. Sonrasında butonun textContent özelliğini kullanarak buton üzerindeki yazıyı değiştirdik.
textContent özelliği (property), buton üzerindeki yazıyı değiştirmek veya buton üzerindeki yazıyı almak için kullanabileceğimiz özellik. Bir değişkene buton üzerindeki yazıyı atamak için
let btnYazisi = btn.textContent;
şeklinde bir kullanım yeterlidir. Eğer buton üzerindeki yazıyı değiştirmek istiyorsanız yapmanız gereken
btn.textContent = "Yeni yazı";
şeklinde bir kullanım yeterli olacaktır. Burada dikkat etmemiz gereken en önemli konu butonu belge içerisinden (DOM) doğru şekilde bulup almaktır. Bunun için document nesnesinin (object) getElementById, querySelect, getElementByClassName gibi metotlarından birinin kullanılması gerekecektir. Butonu belge içerisinden aldıktan sonra geriye üzerindeki yazı veya diğer özelliklerini değiştirmek kalıyor.
innerHTML Özelliğini Kullanma
Buton üzerindeki yazıyı html etiketleri kullanarak değiştireceksek, innerHTML özelliğini kullanabiliriz. Kullanımı textContent gibidir. Fakat innerHTML kullandığınızda buton içeriğine b gibi html etiketleri de ekleyebilirsiniz.
Yukarıdaki örneğimizi innerHTML ile değiştirelim.
<html>
<head>
<title>Buton Yazısını JavaScript İle Nasıl Değiştiririz</title>
</head>
<body>
<h1>JavaScript Etkileşim Demektir</h1>
<p>Bu uygulamamızda bir butona tıkladığımızda buton üzerindeki yazıyı değiştireciğiz.</p>
<button id='girisBtn' onClick='yaziyiDegistir()'>Butona Tıkla</button>
<script>
const btnDOM = document.getElementById('girisBtn');
let sayac = 0;
function yaziyiDegistir() {
sayac += 1;
btnDOM.innerHTML = `<b>Butona Tıkla - ${sayac}</b>`;
}
</script>
</body>
</html>
Yukarıdaki html dosyası olarak kayıt ederek sayfayı açın, sonrasında butona tıkladığınızda yine sayaç çalışacak, fakat ayrıca, b etiketini kullandığımız için buton içerisindeki yazı tıkladıktan sonra kalın görüntülenmeye başlayacaktır.
Buton Üzerindeki Yazıyı JavaScript İle Değiştirme
Buton üzerindeki yazıyı, belgedeki buton elemanının textContent özelliği ile değiştirebiliriz. Bu oldukça kolay bir işlemdir. Yapmamız gereken
btn.textContent = "Atanacak Yeni Yazı";şeklinde bir kullanımdır. Yine istenirse innerHTML özelliği de kullanılabilir. textContent özelliği ile o an buton üzerindeki yazıyı da alabilirsiniz.
Eğer buton veya başka bir yerde bir form aracılığı ile kullanıcıdan gelen bir veriyi kullanmanız gerekiyorsa, direkt kullanmayın. Öncelikle gelen bilgi içesinde zararlı kodlar var mı kontrol edin.
Sizin de sormak istediğiniz veya eklemek istediğiniz konular varsa yorumlara yazabilirsiniz.
DEĞERLİ BİLGİLERİNİ İÇİÇN TEŞEKKÜR EDERİM.
Güzel yorumunuz çok teşekkürler.