Javascript ile Buton Oluşturma

Farklı amaçlar için tasarımlarımızda butonlar oluşturmamız gerekiyor. Bunun için Html bize Button etiketini veriyor. Fakat her zaman Html kodları içerisinde işlem yapmak durumunda değiliz. Bazı durumlarda Javascript kodları içerisinde de buton oluşturmak gerekebilir. Bunun için farklı yöntemler denenebilir.

Biz bu yazımızda Javascript createElement metodunu kullanarak yeni bir buton oluşturup onu sayfamıza ekleyeceğiz. Sonrasında da ona bir onclick eventi ekleyeceğiz.

createElement İle Button Oluşturma

Javascript createElement sıfırdan yeni bir etiket oluşturmak için kullanılır. Parametre olarak oluşturulacak etiketi adını string olarak alır. Kullanım şekli

const yeniElement = document.createElement('div');

şeklindedir. document nesnesinin bir metodudur. Şimdi bu metonu kullanarak bir düğme / buton oluşturalım.

const btn = document.createElement('button');

Artık elimizde btn isminde bit düğmemiz bulunmakta. Bunu istediğimiz şekilde kullabiliriz.

Javascript İle Buton Özelliklerini Değiştirme

Şimdi oluşturduğumuz buton ile ilgili bir kaç özelliği değiştirelim. Mesela butona bir id değeri verelim. Bunun için setAttribute metodunu kullanacağız. setAttribute iki parametre alır, birincisi özellik adı ve ikincisi ise özellik değeri. Standart Html Etiket özellikleri dışında da kendi özelliklerimizi bir etikete atayabiliriz.

btn.setAttribute('id', 'yeniBtn');

Şimdi oluşturduğumuz düğmenin zemin rengini ve yazı rengini değiştirelim.

btn.style.backgroundColor = 'orange';
btn.style.color = 'white';

Javascript İle Buton İçerisindeki Yazıyı Değiştirme

Oluşturduğumuz butonun içeriği boş. Şimdi biz butonun içerisine bir yazı ekleyelim. Bunun için innerText metonudu kullanacağız. Bu metod bir etiketin içerisine metin eklemek için kullanılır.

btn.innerText = 'Yeni Buton';

Bu kadar basit. İşlemlerimizi tek tek yapmaya devam edelim.

Javascript İle Butona onClick Eventi Ekleme

Şimdi yapacağımız işlem, oluşturduğumuz butona bir onclick metodu eklemek. Bunun için addEventListener metonudu kullanıyoruz. Bu metod bir etikete event (olay) eklemek için kullanılır ve event ismi ile eventte tetiklenecek fonksiyonu parametre olarak alır.

btn.addEventListener('click', () => alert('Yeni Butona tıklandı.'));

İkinci parametre olan fonksiyonu dışarıda yazarak sadece ismi ile de kullanabiliriz.

function tiklandi() {
    alert('Yeni Butona tıklandı');
}

btn.addEventListener('click', tiklandi);

Yukarıdaki iki yöntemden kodu yazarken en faydalı olanı kullanabilirsiniz. Kısa kodlarda inline fonksiyon kullanılabilir. Yine bir kaç yerde kullanılacak bir fonksiyon kullanılacaksa, dışarıda tanımlanarak sadece ismi ile kullanılabilir.

Javascript İle Butonu Sayfaya Ekleme

Her ne kadar yeni bir buton oluşturmuş olsakda, bu butonu sayfada göremeyeceğiz. Çünkü oluşturduğumuz bu butonu daha sayfaya eklemedik.

Bu işlem için Butonu nereye ekleyeceğimizi seçmemiz gereklidir. Mesel menu id değerine sahip bir Div etiketi içerisinde kullanacağımızı varsayalım.

<div id='menu'></div>

Bunun için önce bu div etiketini seçmemiz gerekiyor. Bunun için getElementById metodunu kullanabiliriz.

const menuDiv = document.getElementById('menu');

Ve ardından appendChild metodu ile oluşturduğumuz butonu menu div etiketini içerisine yerleştirebiliriz.

menuDiv.appendChild(btn);

İşlemi yaparken daha önce oluşturduğumuz buton nesnesini kullandığımıza dikkat edin. Artık butonumuz sayfamıza ekli durumda.

Esnek bir dil olan Javascript ile bir Button oluşturmak oldukça kolaydır. Aynı zamanda da zevkli. Önemli olan ne yapacağımıza karar verip sonrasında hangi yöntemi kullanacağımızı seçmektir.

Sonuç

Javascript ile yeni bir buton oluşturulacaksa bu işlem için document.createElement metodu kullanılabilir. Sonrasında farklı metodlar kullanılarak oluşturulan butonun özellikleri kolay bir şekilde ayarlanabilir.

Javascript ile ilgili eklemek istediklerinizi ve sorularınızı yorumlardan bize iletebilirsiniz.