Bu yazıda butona tıklandığında butonun, div etiketinin ve input nesnesinin içindeki yazıları nasıl değiştireceğinizi göstereceğiz.
Daha önceki yazılarda JavaScript ile butona tıklandığında kod çalıştırma örneği yapmıştık. Bu yazıda da benzer kodları kullanarak yazı değiştirme işlemi nasıl yapılacağını göstereceğiz.
Butona tıklandığında butonun yazısını değiştirme
Burada kullanılan butonun input yada button nesnesi olup olmadığı önemlidir. Eğer input button kullanıyorsanız value, button etiketi kullanıyorsanız textContent özelliğini kullanarak nesne içindeki yazıyı değiştirebilirsiniz.
Ayrıca ilgili buton için this ifadesi kullanılabilir. this ile hangi butona basıldıysa o buton içindeki değer değişecektir.
Örnek Kod(input):
1 2 3 4 5 6 7 8 9 10 | <input id="btn1" type="button" value="Tıkla"> <script> btn1.onclick=function(){ this.value ="Yazı Değişti!!!" } </script> |
Örnek Kod(button):
1 2 3 4 5 6 7 8 9 10 | <button id="btn1">TIKLA</button> <script> btn1.onclick=function(){ this.textContent ="Yazı Değişti!!!" } </script> |
Butona tıklandığında input yazısını değiştirme
Butona tıklandığında bir input içindeki yazıyı değiştirmek için input nesnesinin value özelliğini kullabilirsiniz.
1 2 3 4 5 6 7 8 9 10 11 | <button id="btn1">TIKLA</button> <input type="text" id="txtIsim" value="Hayri"> <script> btn1.onclick=function(){ txtIsim.value="KOÇ" } </script> |
Butona tıklandığında div yazısını değiştirme
Aynı input nesneleri gibi div içindeki yazılar değiştirmek için de benzer şekilde textContent yada innerHTML özellikleri kullanılabilir. textContent sadece içeriği değiştirmek, innerHTML ise içerisinde HTML kodu ile değiştirmek için kullanılır.
1 2 3 4 5 6 7 8 9 10 11 | <button id="btn1">TIKLA</button> <div id="divIsım">ad <b>Hayri</b></div> <script> btn1.onclick=function(){ divIsım.innerHTML="Soyad:<b>KOÇ</b>" } </script> |
Yorum Yap