Merhaba arkadaşlar bu yazıda JavaScript ile buton oluşturacağız. Yazının devamında oluşturduğumuz butonun rengini değiştirip, butona olay eklemesi de yapacaız.
JavaScript ile buton oluşturmak için createElement fonksiyonu kullanılır. Fonksiyona oluşturulacak etiket adı parametre olacak geçilir.
HTML Button
Buton oluşturmayı yapmadan önce HTML içinde iki tane buton oluşturma etiketi olduğunu belirmek isterim.
- <input> – input kullanılırsa type niteliği “button” yapılması gerkir.
- <button>
ikisinden biri seçerek buton oluşturmaya başlıyoruz.
JavaScript Buton Oluşturma
Buton Oluşturma: createElement fonksiyonu ile butonu oluşturuyoruz.
1 2 3 | var btn=document.createElement("button"); |
Butonun niteliklerini oluşturma: Butonun id ve name niteliklerini tanımlıyoruz.
1 2 3 4 | btn.setAttribute("id","btn1"); btn.setAttribute("name","btn1"); |
Buton üzerindeki yazıyı yazma: button etiketi üzerindeki değeri value yerine innerHTML yada innerText ile almaktadır.
1 2 3 | btn.innerText="Butona tıkla!!!"; |
Butonu #panel divine ekleme: panel etiketini seçip appendChile fonksiyonu ile panelin içine butonu ekliyoruz.
1 2 3 4 | var panelDiv=document.getElementById("panel"); panelDiv.appendChild(btn); |
Butonun rengini değiştirme: Renk yada benzer stil özelliklerini değiştirmek için nesnenin style özelliği kullanılır.
1 2 3 | btn.style.cssText="color:yellow; background:black; font-size:16px; padding:8px;"; |
Butona olay ekleme: Buton oluşturulduktan sonra mevcut HTML nesnelerinde olduğu gibi on… ile başlayan niteliklere fonksiyon ataması ile olay oluşturulur. Aşağıdaki kod ile butona tıklandğınında “HOŞGELDİNİZ” uyarısı verdiriyoruz.
1 2 3 4 5 | btn.onclick=function(){ window.alert("HOŞGELDİNİZ"); } |
Kodları toparlayacak olursak şu şekilde oluşacaktır.
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 32 33 | <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Tasarım Kodlama</title> </head> <body> <div id="panel"></div> <script> 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> |
Yorum Yap