Tulisan ini akan mendemonstrasikan metode untuk mendapatkan dan mengatur nilai teks input dalam JavaScript.
Bagaimana Mendapatkan dan Mengatur Nilai Teks Input dalam JavaScript?
Untuk mendapatkan dan mengatur nilai teks input dalam JavaScript, gunakan:
- “ getElementById() ' metode
- “ getElementByClassName() ' metode
- “ kueriPemilih() ' metode
Pergi melalui masing-masing metode yang disebutkan satu per satu!
Metode 1: Dapatkan dan Tetapkan Nilai Teks Input dalam JavaScript Menggunakan Metode document.getElementById()
' getElementById() ” metode mengakses elemen dengan Id yang ditentukan. Metode ini dapat diterapkan untuk mengakses id bidang input dan tombol untuk mendapatkan dan mengatur nilai teks.
Sintaksis
dokumen. getElementById ( elemen )
Di Sini, ' elemen ” mengacu pada Id yang ditentukan dari suatu elemen.
Contoh di bawah ini menjelaskan konsep yang dibahas.
Contoh
Pertama, sertakan dua bidang jenis input dan tombol terpisah untuk mendapatkan dan mengatur nilai teks input dengan ' klik ” acara yang akan mengakses fungsi yang ditentukan:
< tombol onclick = 'getTeks()' > Dapatkan Nilai tombol >
< tombol onclick = 'getAndSetText()' > Tetapkan Nilai tombol >
< tipe masukan = 'teks' Indo = 'setTeks' nama = 'setTeks' klik = 'ini.nilai = '' ' />
Kemudian, dapatkan nilai bidang input dengan bantuan metode document.getElementById() :
dokumen. getElementById ( 'getTeks' ) . nilai = 'Masukkan Disini' ;Sekarang, nyatakan fungsi bernama “ getAndSetText() ”. Di sini, ambil bidang input dengan ' getText ” id dan berikan nilai input ke kolom input berikutnya yang memiliki “ setTeks ' Indo:
fungsi getAndSetText ( ) {dulu setTeks = dokumen. getElementById ( 'getTeks' ) . nilai ;
dokumen. getElementById ( 'setTeks' ) . nilai = setTeks ;
}
Demikian pula, tentukan fungsi bernama “ getTeks() ”. Setelah itu, dapatkan kolom input dengan “ getText ” id dan berikan nilai tertentu ke kotak peringatan untuk mendapatkan nilai teks input:
fungsi getText ( ) {dulu getText = dokumen. getElementById ( 'getTeks' ) . nilai ;
peringatan ( getText ) ;
}
Keluaran
Metode 2: Dapatkan dan Tetapkan Nilai Teks Input dalam JavaScript Menggunakan Metode document.getElementByClassName()
' getElementByClassName() ” metode mengakses elemen dengan bantuan nama kelas yang ditentukan. Metode ini, juga, dapat diterapkan untuk mengakses kelas bidang input dan tombol untuk memasukkan dan mengatur nilai teks.
Sintaksis
dokumen. getElementsByClassName ( nama kelas )Dalam sintaks di atas, ' nama kelas ” mewakili nama kelas elemen.
Contoh
Mirip dengan contoh sebelumnya, pertama-tama kita akan mengakses bidang input pertama dengan ' getText ' nama kelas. Kemudian, tentukan fungsi bernama “ getAndSetText() ” dan dapatkan bidang input yang ditentukan berdasarkan nama kelasnya dan atur nilainya di bidang input berikutnya:
fungsi getAndSetText ( )
{
dulu setTeks = dokumen. getElementByClassName ( 'getTeks' ) . nilai ;
dokumen. getElementById ( 'setTeks' ) . nilai = setTeks ;
}
Demikian juga, tentukan fungsi bernama “ getTeks() ”, tambahkan nama kelas dari bidang input pertama dan berikan nilai tertentu ke kotak peringatan untuk menampilkan nilai yang diambil:
fungsi getText ( ) {dulu getText = dokumen. getElementByClassName ( 'getTeks' ) . nilai ;
peringatan ( getText ) ;
}
Implementasi ini akan menghasilkan output berikut:
Metode 3: Dapatkan dan Tetapkan Nilai Teks Input dalam Javascript Menggunakan Metode “document.querySelector()”
' document.queryPemilih() ” mengambil e pertama turun yang cocok dengan pemilih yang ditentukan, dan metode addEventListener() dapat menambahkan pengendali peristiwa ke elemen yang dipilih. Metode-metode ini dapat diterapkan untuk mendapatkan id bidang input dan tombol dan menerapkan pengendali peristiwa ke dalamnya.
Sintaksis
dokumen. kueriPemilih ( pemilih CSS )Di Sini, ' pemilih CSS ” merujuk ke satu atau beberapa pemilih CSS.
Lihatlah contoh berikut.
Contoh
Pertama, sertakan tipe input dengan nilai dan tombol placeholdernya untuk mendapatkan dan mengatur nilai teks input:
< ID tombol = 'Dapatkan' > DAPATKAN tombol >
< tipe masukan = 'teks' Indo = 'set masukan' tempat penampung = 'Tetapkan Nilai' >
< ID tombol = 'mengatur' > MENGATUR tombol >
Selanjutnya, ambil bidang dan tombol input yang ditambahkan menggunakan ' document.queryPemilih() ' metode:
biarkan tombolDapatkan = dokumen. kueriPemilih ( '#Dapatkan' ) ;biarkan tombolSet = dokumen. kueriPemilih ( '#mengatur' ) ;
biarkan mendapatkan Masukan = dokumen. kueriPemilih ( '#masukan-dapatkan' ) ;
biarkan setInput = dokumen. kueriPemilih ( '#set masukan' ) ;
biarkan hasil = dokumen. kueriPemilih ( '#hasil' ) ;
Kemudian, sertakan event handler bernama “ klik ” untuk kedua tombol untuk mendapatkan dan mengatur nilainya, masing-masing:
tombolDapatkan. tambahkanEventListener ( 'klik' , ( ) => {hasil. innertext = dapatkan masukan. nilai ;
} ) ;
tombolSet. tambahkanEventListener ( 'klik' , ( ) => {
dapatkan masukan. nilai = atur masukan. nilai ;
} ) ;
Keluaran
Kami telah membahas metode paling sederhana untuk mendapatkan dan mengatur nilai teks input dalam JavaScript.
Kesimpulan
Untuk mendapatkan dan mengatur nilai teks input dalam JavaScript, gunakan ' document.getElementById() ” metode atau
“ document.getElementByClassName() ” untuk mengakses bidang input dan tombol yang ditentukan berdasarkan id atau nama kelasnya dan kemudian mengatur nilainya. Apalagi, “ document.queryPemilih() ” juga dapat digunakan untuk mendapatkan dan mengatur nilai teks input dalam JavaScript. Blog ini menjelaskan metode untuk mendapatkan dan mengatur nilai teks input dalam JavaScript.