JavaScript Button Ile Div İçine Yazı Yazdırma

Bu örnekte JavaScript ile HTML elemanlarına nasıl erişilebileceğinizi basit bir örnekler göstereceğim.

Örnekte html sayfasında bir button ve bir div elemanımız bulunmakta. Button’ a basıldığında div öğesinin içeriğine bir metin ekleyeceğiz.

Bu örnekte div yerine başlık h1, h2, h3 ya da bir paragrafta kullanabiliriz. Önemli olan müdahale etmek istediğimiz elemanın bir id’ si olmasıdır.

Şimdi kodlarımıza ve ekran çıktısına bakalım:

<!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.yazilimkodlama.com"; } var btnYaz=document.getElementById("btn"); btnYaz.onclick=Yazdir; </script> </body> </html>
1234567891011121314151617181920212223 <!doctype html><html><head><meta charset="utf-8"><title>Untitled Document</title></head> <body><button id="btn">YAZDIR</button><div id="kutu"></div> <script>functionYazdir(){document.getElementById("kutu").innerHTML="www.yazilimkodlama.com";}varbtnYaz=document.getElementById("btn");btnYaz.onclick=Yazdir;</script></body></html>

Ekran Çıktısı:

Bunu paylaş:

  • Twitter üzerinde paylaşmak için tıklayın (Yeni pencerede açılır)
  • Facebook'ta paylaşmak için tıklayın (Yeni pencerede açılır)

Từ khóa » Html Yazdır Butonu