JavaScript ile HTML sayfasında id’si bulunan her elemana müdahale edebilirsiniz. Bu yazımızda, sayfa içinde bulunan bir div elemanına yazı yazdırmayı göstereceğiz.
1. Sayfanın Hazırlanması
Bu işlem için öncelikle sayfamızı aşağıdaki gibi oluşturalım. Sayfamızda sadece id’si kutu olan bir div elemanı bulunuyor:
1 2 3 4 5 6 7 8 9 10 11 12 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>Div İçine Yazma</title> </head> <body> <div id="kutu"></div> </body> </html> |
2. JavaScript ile Div İçine Yazı Yazdırma
Bu div içerisine istedığimiz metni yazdırmak için JavaScript kodlarımızı <script> etiketleri arasında yazacağız:
1 2 3 4 5 | <script> document.getElementById("kutu").innerHTML = "www.tasarimkodlama.com"; </script> |
Tüm Kodlar
Aşağıda, tüm kodların birleştirilmiş halini görebilirsiniz:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>Div İçine Yazma</title> </head> <body> <div id="kutu"></div> <script> document.getElementById("kutu").innerHTML = "www.tasarimkodlama.com"; </script> </body> </html> |
Ekranda, div elemanının içinde “www.tasarimkodlama.com” yazdığını göreceksiniz.
3. Buton Kullanarak Yazı Yazdırma
Aynı örneği bir buton kullanarak da gerçekleştirebiliriz. Bu kez, butona basıldığında div içine yazı yazılmasını sağlayacağız:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>Buton ile Div İçine Yazma</title> </head> <body> <button id="btn">YAZDIR</button> <div id="kutu"></div> <script> function Yazdir() { document.getElementById("kutu").innerHTML = "www.tasarimkodlama.com"; } var btnYaz = document.getElementById("btn"); btnYaz.onclick = Yazdir; </script> </body> </html> |
Ekran Çıktısı
Sayfa yüklenince, “YAZDIR” adında bir buton ve altında boş bir div elemanı görünür. Butona tıkladığınızda, div içerisine “www.tasarimkodlama.com” yazısı eklenir.
Yorum Yap