Merhaba arakdaşlar bu yazıdan document.createElement nesnesini kullanarak javascript tarafında nasıl buton oluşturulduğunu göstereceğim. createElement nesnesi ile tüm HTML etiketlerini de oluşturmanın mümkün olduğunu belirterek oluşturduğumuz butonun CSS düzenlemesini de yaptığımızı belirtmek isterim.
Uygulama yapılışı ile ilgili kodların yanında aşağıdaki video ile de JavaScript button oluşturup, CSS düzenlemesi yapmayı öğrenebilirsiniz.
Öncelikle HTML dosyasını aşağıdaki gibi oluşturuyoruz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Tasarım Kodlama</title> </head> <body> <div id="panel"></div> <script> //javascript kodları buraya yazılacak </script> </body> </html> |
Sonraki aşamada buton nesnesini oluşturup butonun niteliklerini aşağıdaki gibi tanımlıyoruz.
|
1 2 3 4 5 6 7 8 |
//javascript kodları buraya yazılacak var btn=document.createElement("button"); btn.setAttribute("id","btn1"); btn.setAttribute("name","btn1"); btn.innerText="Butona tıkla!!!"; |
Buton nesnesi bellekte oluşturuldu ve nitelikleri tanımlandı. Şimdi butonun style düzenlemesini yapıp butonun onclick(tıklama) niteliğine gerekli kodu yazıyoruz.
|
1 2 3 4 5 6 7 |
btn.style.cssText="color:yellow; background:black; font-size:16px; padding:8px;"; btn.onclick=function(){ window.alert("HOŞGELDİNİZ"); } |
Artık butonu bir HTML nesnesi içine eklemeye geldi. panel adında bir div içine eklemek için aşağıdaki kodları yazıyoruz.
|
1 2 3 4 |
var panelDiv=document.getElementById("panel"); panelDiv.appendChild(btn); |
JavaScript ile buton oluşturma ve oluşturulan butona olay ekleme işlemlerini yaptık. Yapılan çalışmada kullanılan tüm kodlara aşağıdan ulaşabilirsiniz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Tasarım Kodlama</title> </head> <body> <div id="panel"></div> <script> //javascript kodları buraya yazılacak var btn=document.createElement("button"); btn.setAttribute("id","btn1"); btn.setAttribute("name","btn1"); btn.innerText="Butona tıkla!!!"; btn.style.cssText="color:yellow; background:black; font-size:16px; padding:8px;"; btn.onclick=function(){ window.alert("HOŞGELDİNİZ"); } var panelDiv=document.getElementById("panel"); panelDiv.appendChild(btn); </script> </body> </html> |
