Bu yazı, JavaScript'te giriş metni değerlerini alma ve ayarlama yöntemlerini gösterecektir.
JavaScript'te Giriş Metni Değeri Nasıl Alınır ve Ayarlanır?
JavaScript'te giriş metni değerini almak ve ayarlamak için şunları kullanın:
- “ getElementById() ' yöntem
- “ getElementByClassName() ' yöntem
- “ sorguSeçici() ' yöntem
Bahsedilen yöntemlerin her birini tek tek inceleyin!
Yöntem 1: Document.getElementById() Yöntemini Kullanarak JavaScript'te Girdi Metni Değerini Alma ve Ayarlama
“ getElementById() ” yöntemi, belirtilen Id'ye sahip bir öğeye erişir. Bu yöntem, metin değerini almak ve ayarlamak için giriş alanlarının ve düğmelerin kimliklerine erişmek için uygulanabilir.
Sözdizimi
belge. getElementById ( elementler )
Burada, ' elementler ”, bir öğenin belirtilen kimliğini ifade eder.
Aşağıdaki örnek tartışılan kavramı açıklamaktadır.
Örnek
İlk olarak, giriş metni değerlerini almak ve ayarlamak için iki giriş türü alanı ve ayrı düğmeler ekleyin “ tıklamada ” belirtilen işlevlere erişecek olaylar:
< tıklandığında düğme = 'metin()' > Değer elde etmek buton >
< tıklandığında düğme = 'getAndSetText()' > Değeri Ayarla buton >
< giriş tipi = 'Metin' İD = 'Metin ayarla' isim = 'Metin ayarla' tıklamada = 'bu.değer = '' ' />
Ardından, Document.getElementById() yönteminin yardımıyla giriş alanının değerini alın:
belge. getElementById ( 'getText' ) . değer = 'Buraya Girin' ;Şimdi, “ adlı bir işlev tanımlayın. getAndSetText() ”. Burada, giriş alanını “ ile getirin. getText ” id ve giriş değerini “ olan bir sonraki giriş alanına iletin. Metin ayarla kimlik:
işlev getAndSetText ( ) {oldu Metin ayarla = belge. getElementById ( 'getText' ) . değer ;
belge. getElementById ( 'Metin ayarla' ) . değer = Metin ayarla ;
}
Benzer şekilde, “ adlı bir işlev tanımlayın. getText() ”. Bundan sonra, giriş alanını “ ile alın. getText ” id ve giriş metni değerini almak için belirli değeri uyarı kutusuna iletin:
işlev getText ( ) {oldu getText = belge. getElementById ( 'getText' ) . değer ;
Alarm ( getText ) ;
}
Çıktı
Yöntem 2: Document.getElementByClassName() Yöntemini Kullanarak JavaScript'te Girdi Metni Değerini Alın ve Ayarlayın
“ getElementByClassName() ” yöntemi, belirtilen sınıf adı yardımıyla bir öğeye erişir. Bu yöntem, benzer şekilde, metin değerini girmek ve ayarlamak için giriş alanının ve düğmelerin sınıfına erişmek için uygulanabilir.
Sözdizimi
belge. getElementsByClassName ( sınıf adı )Yukarıdaki sözdiziminde, “ sınıf adı ”, öğelerin sınıf adını temsil eder.
Örnek
Önceki örneğe benzer şekilde, ilk giriş alanına “ ile erişeceğiz. getText ' sınıf adı. Ardından, “ adlı bir işlev tanımlayın. getAndSetText() ” ve sınıf adına göre belirtilen giriş alanını alın ve sonraki giriş alanındaki değeri ayarlayın:
işlev getAndSetText ( )
{
oldu Metin ayarla = belge. getElementByClassName ( 'getText' ) . değer ;
belge. getElementById ( 'Metin ayarla' ) . değer = Metin ayarla ;
}
Aynı şekilde, “adlı bir fonksiyon tanımlayın. getText() ”, ilk giriş alanının sınıf adını ekleyin ve alınan değeri görüntülemek için belirli değeri uyarı kutusuna iletin:
işlev getText ( ) {oldu getText = belge. getElementByClassName ( 'getText' ) . değer ;
Alarm ( getText ) ;
}
Bu uygulama aşağıdaki çıktıyı verecektir:
Yöntem 3: “document.querySelector()” Yöntemini Kullanarak Javascript'te Girdi Metni Değerini Alın ve Ayarlayın
“ Document.querySelector() ” ilk e'yi getirir aşağı gitti belirtilen seçiciyle eşleşen ve addEventListener() yöntemi, seçilen öğeye bir olay işleyicisi ekleyebilir. Bu yöntemler, giriş alanının ve düğmelerin kimliğini almak ve bunlara bir olay işleyicisi uygulamak için uygulanabilir.
Sözdizimi
belge. sorgu seçici ( CSS seçicileri )Burada, ' CSS seçicileri ” bir veya daha fazla CSS seçicisine bakın.
Aşağıdaki örneğe bakın.
Örnek
İlk olarak, giriş metni değerlerini almak ve ayarlamak için yer tutucu değerleri ve düğmeleriyle birlikte giriş türlerini ekleyin:
< düğme kimliği = 'almak' > ALMAK buton >
< giriş tipi = 'Metin' İD = 'giriş kümesi' Yer tutucu = 'Değeri Ayarla' >
< düğme kimliği = 'Ayarlamak' > AYARLAMAK buton >
Ardından, “ düğmesini kullanarak eklenen giriş alanlarını ve düğmeleri getirin. Document.querySelector() ' yöntem:
butonu al = belge. sorguSelector ( '#almak' ) ;Let buttonSet = belge. sorguSelector ( '#Ayarlamak' ) ;
izin ver = belge. sorguSelector ( '#girdi-al' ) ;
setInput'a izin ver = belge. sorguSelector ( '#girdi seti' ) ;
sonuç ver = belge. sorguSelector ( '#sonuç' ) ;
Ardından, “ adlı bir olay işleyicisi ekleyin. Tıklayın ” sırasıyla değerleri almak ve ayarlamak için her iki düğme için:
düğmeAl. addEventListener ( 'Tıklayın' , ( ) => {sonuç. iç metin = getInput. değer ;
} ) ;
düğme kümesi. addEventListener ( 'Tıklayın' , ( ) => {
getInput. değer = setInput. değer ;
} ) ;
Çıktı
JavaScript'te giriş metni değerini almak ve ayarlamak için en basit yöntemleri tartıştık.
Çözüm
JavaScript'te giriş metni değerini almak ve ayarlamak için “ belge.getElementById() ” yöntemi veya
“ document.getElementByClassName() ” kimliklerine veya sınıf adlarına göre belirtilen giriş alanına ve düğmelere erişme yöntemi ve ardından değerlerini ayarlayın. Ayrıca, “ Document.querySelector() ” JavaScript'te giriş metni değerlerini almak ve ayarlamak için de kullanılabilir. Bu blog, JavaScript'te giriş metni değerlerini alma ve ayarlama yöntemlerini açıkladı.