JavaScript Buton Oluşturma – Tasarım Kodlama
JavaScript

JavaScript Buton Oluşturma

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.

 

Butonun niteliklerini oluşturma: Butonun id ve name niteliklerini tanımlıyoruz.

Buton üzerindeki yazıyı yazma: button etiketi üzerindeki değeri value yerine innerHTML yada innerText ile almaktadır.

 

Butonu #panel divine ekleme: panel etiketini seçip appendChile fonksiyonu ile panelin içine butonu ekliyoruz.

 

Butonun rengini değiştirme: Renk yada benzer stil özelliklerini değiştirmek için nesnenin style özelliği kullanılır.

 

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.

 

Kodları toparlayacak olursak şu şekilde oluşacaktır.

 

 

Yorum bırak