JavaScript ile Html sayfasında id’ si bulunan her elemana müdahale edebilirsiniz. Örneğimizde sayfa içinde bulunan bir div elemanına yazı yazdıracağız.
Bu işlem için öncelikli olarak 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 13 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> </head> <body> <div id="kutu"></div> </body> </html> |
Şimdi bu div içerisine istediğimiz metni yazdıralım.
JavaScript kodlarını <script> </script> etiketleri arasında yazacağız.
|
1 2 3 4 5 |
<script> document.getElementById("kutu").innerHTML="www.tasarimkodlama.com"; </script> |
.html sayfamızdaki kodların tümü:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> </head> <body> <div id="kutu"></div> <script> document.getElementById("kutu").innerHTML="www.tasarimkodlama.com"; </script> </body> </html> |
Ekran Çıktısı:
Şimdi de aynı örneği bir button kullanarak gerçekleştirelim. Yani butona basıldığında div içine yazı yazılmasını sağlayalım.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</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> |
Yorum Yap