Javascript

JavaScript ile Buton Oluşturma

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.

 

Sonraki aşamada buton nesnesini oluşturup butonun niteliklerini aşağıdaki gibi tanımlıyoruz.

 

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.

 

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.

 

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.

 

Yorum yap