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>

<!doctype html>

<html>

<head>

<title>Untitled Document</title>

</head>

<body>

<button id="btn">YAZDIR</button>

function Yazdir(){

document.getElementById("kutu").innerHTML="www.yazilimkodlama.com";

}

var btnYaz=document.getElementById("btn");

btnYaz.onclick=Yazdir;

</script>

</body>

</html>

Ekran Çıktısı:

2 Yorum

Gökhan dedi ki:

Ocak 20, 2021, 6:48 pm

Spoiler buton yapımı konusunda çok yardımcı oldu teşekkürler dostum.

Cevapla
Furkan dedi ki:

Temmuz 24, 2020, 10:44 am

Merhaba. Bir sorum var da uzun zamandır araştırıyorum ama bir türlü bulamadım. Bir input yada bir textarea nın içerisine yazı yazmak için. value += Gibi bir ifade kullanıyorum ama bu sadece içeriğin sonuna ekliyor. Benim istediğim ise içeriğin ortalarını değiştirmek. Acaba bu veya imlecin yanına yazı yazmak mümkünmüdür. Mümkünse geri gönerseniz çok sevinirim.

Cevapla

Bunu paylaş:

Şunlar da Hoşunuza Gidebilir

2 Yorum

Yorum yap X

Web Tasarım & Programlama sitesinden daha fazla şey keşfedin