Geliştiriciler çoğunlukla web sayfalarının çekici olmasını ve etkileşimli olmasını ister. Bu amaçla web sayfasına butonlar eklenir. Örneğin, bir hesaba kaydolurken veya oturum açarken kullanıcı için eklenen işlevler için tıklama olayları dahil olmak üzere veri gönderme veya alma ihtiyacı olduğunda. Bu gibi durumlarda, düğmeler son kullanıcının çeşitli işlevleri akıllıca gerçekleştirmesini sağlar.
Bu blog, JavaScript'te düğme oluşturma yöntemlerini açıklayacaktır.
JavaScript'te Düğme Nasıl Oluşturulur?
JavaScript'te düğme oluşturmak için aşağıdaki yöntemler kullanılabilir:
Aşağıdaki yaklaşımlar konsepti tek tek gösterecektir!
Yöntem 1: “createElement()” ve “appendChild()” Yöntemlerini Kullanarak JavaScript'te Düğme Oluşturun
“ createElement() ” yöntemi bir öğe oluşturur ve “ ek Çocuk() ” yöntemi, bir öğenin son çocuğuna bir öğe ekler. Bu yöntemler, sırasıyla bir düğme oluşturmak ve kullanılması gereken Belge Nesne Modeli'ne (DOM) eklemek için uygulanacaktır.
Sözdizimi
belge. createElement ( tip )öğe. ekleÇocuk ( düğüm )
Yukarıdaki sözdiziminde, ' tip ” createElement() yöntemi kullanılarak oluşturulacak öğenin türünü ifade eder ve “ düğüm ”, appendChild() yönteminin yardımıyla eklenecek düğümdür.
Aşağıdaki örnek, belirtilen kavramı açıklayacaktır.
Örnek
Öncelikle bir “ buton ”, document.createElement() yöntemi kullanılarak oluşturulacak ve “ adlı bir değişkende saklanacaktır. oluşturDüğmesi ”:
const oluşturDüğmesi = belge. createElement ( 'buton' )Ardından, “ iç metin ” özelliği, oluşturulan butona atıfta bulunacak ve belirtilen butonun metin değerini aşağıdaki gibi ayarlayacaktır:
oluşturDüğmesi. iç metin = 'Beni tıkla'Son olarak, “ ek Çocuk() ” yöntemi, argüman olarak saklandığı değişkene atıfta bulunarak oluşturulan düğmeyi DOM'a ekler:
belge. gövde . ekleÇocuk ( oluşturDüğmesi ) ;Yukarıdaki uygulamanın çıktısı aşağıdaki gibi sonuçlanacaktır:
Yöntem 2: “Input” Etiketinin “Type” Niteliğini Kullanarak JavaScript'te Düğme Oluşturun
“ tip ” niteliği, görüntülenecek giriş öğesinin türünü temsil eder. “ belirterek bir düğme oluşturmak için kullanılabilir. buton ” giriş etiketinin type özelliğinin değeri olarak.
Sözdizimi
< giriş tipi = 'buton' >Burada, ' buton ” giriş alanının türünü belirtir.
Aşağıda verilen örneği inceleyin.
Örnek
İlk olarak bir input etiketi kullanacağız, tipini “ olarak belirleyeceğiz. buton ” ve “olarak değer Beni tıkla ”. Sonuç olarak, bir düğme oluşturulacaktır. Ayrıca, “ oluşturDüğmesi() ” işlevi tıklandığında:
< giriş tipi = düğme değeri = Click_Me onclick = 'createButton()' >JavaScript dosyasında “ oluşturDüğmesi() ” eklenen butona tıklandığında bir uyarı kutusu oluşturacak olan fonksiyon:
işlev oluşturDüğmesi ( ) {Alarm ( 'Bu bir düğme' )
}
Çıktı
JavaScript'te bir düğme oluşturmak için tartışılan teknikler, gereksinimlere göre uygun şekilde kullanılabilir.
Çözüm
JavaScript'te bir düğme oluşturmak için “ createElement() ' ve ' ek Çocuk() DOM'da kullanılmak üzere bir buton oluşturmak ve eklemek için ” yöntemleri uygulanabilir. Bir düğme oluşturmak için kullanılabilecek başka bir teknik, bir giriş türü tanımlamak ve ilgili işlevselliği eklemektir. Bu makale, JavaScript'te bir düğme oluşturma yöntemlerini gösterdi.