Tulisan ini akan menunjukkan kaedah untuk mendapatkan dan menetapkan nilai teks input dalam JavaScript.
Bagaimana untuk Mendapatkan dan Menetapkan Nilai Teks Input dalam JavaScript?
Untuk mendapatkan dan menetapkan nilai teks input dalam JavaScript, gunakan:
- “ getElementById() ” kaedah
- “ getElementByClassName() ” kaedah
- “ querySelector() ” kaedah
Semak setiap kaedah yang disebutkan satu persatu!
Kaedah 1: Dapatkan dan Tetapkan Nilai Teks Input dalam JavaScript Menggunakan Kaedah document.getElementById().
' getElementById() ” kaedah mengakses elemen dengan Id yang ditentukan. Kaedah ini boleh digunakan untuk mengakses id medan input dan butang untuk mendapatkan dan menetapkan nilai teks.
Sintaks
dokumen. getElementById ( elemen )
Di sini, ' elemen ” merujuk kepada Id yang ditentukan bagi sesuatu elemen.
Contoh di bawah menerangkan konsep yang dibincangkan.
Contoh
Pertama, masukkan dua medan jenis input dan butang berasingan untuk mendapatkan dan menetapkan nilai teks input dengan “ onclick ” peristiwa yang akan mengakses fungsi yang ditentukan:
< butang onclick = 'getText()' > Dapatkan Nilai butang >
< butang onclick = 'getAndSetText()' > Tetapkan Nilai butang >
< jenis input = 'teks' ID = 'setTeks' nama = 'setTeks' onclick = 'this.value = '' ' />
Kemudian, dapatkan nilai medan input dengan bantuan kaedah document.getElementById():
dokumen. getElementById ( 'getText' ) . nilai = 'Input Di Sini' ;Sekarang, isytiharkan fungsi bernama ' getAndSetText() ”. Di sini, ambil medan input dengan ' getText ” id dan hantar nilai input ke medan input seterusnya yang mempunyai “ setText ' ID:
fungsi getAndSetText ( ) {adalah setText = dokumen. getElementById ( 'getText' ) . nilai ;
dokumen. getElementById ( 'setText' ) . nilai = setText ;
}
Begitu juga, tentukan fungsi bernama ' getText() ”. Selepas itu, dapatkan medan input dengan ' getText ” id dan hantar nilai tertentu ke kotak amaran untuk mendapatkan nilai teks input:
fungsi getText ( ) {adalah getText = dokumen. getElementById ( 'getText' ) . nilai ;
amaran ( getText ) ;
}
Pengeluaran
Kaedah 2: Dapatkan dan Tetapkan Nilai Teks Input dalam JavaScript Menggunakan Kaedah document.getElementByClassName()
' getElementByClassName() ” kaedah mengakses elemen dengan bantuan nama kelas yang ditentukan. Kaedah ini, begitu juga, boleh digunakan untuk mengakses kelas medan input dan butang untuk memasukkan dan menetapkan nilai teks.
Sintaks
dokumen. getElementsByClassName ( nama kelas )Dalam sintaks di atas, ' nama kelas ” mewakili nama kelas unsur.
Contoh
Sama seperti contoh sebelumnya, kami mula-mula akan mengakses medan input pertama dengan ' getText ” nama kelas. Kemudian, tentukan fungsi bernama ' getAndSetText() ” dan dapatkan medan input yang ditentukan berdasarkan nama kelasnya dan tetapkan nilai dalam medan input seterusnya:
fungsi getAndSetText ( )
{
adalah setText = dokumen. getElementByClassName ( 'getText' ) . nilai ;
dokumen. getElementById ( 'setText' ) . nilai = setText ;
}
Begitu juga, tentukan fungsi bernama ' getText() ”, tambahkan nama kelas medan input pertama dan hantar nilai tertentu ke kotak amaran untuk memaparkan nilai yang diambil:
fungsi getText ( ) {adalah getText = dokumen. getElementByClassName ( 'getText' ) . nilai ;
amaran ( getText ) ;
}
Pelaksanaan ini akan menghasilkan output berikut:
Kaedah 3: Dapatkan dan Tetapkan Nilai Teks Input dalam Javascript Menggunakan Kaedah 'document.querySelector()'
' document.querySelector() ” mengambil e pertama telah turun yang sepadan dengan pemilih yang ditentukan, dan kaedah addEventListener() boleh menambah pengendali acara pada elemen yang dipilih. Kaedah ini boleh digunakan untuk mendapatkan id medan input dan butang dan menggunakan pengendali acara kepada mereka.
Sintaks
dokumen. querySelector ( pemilih CSS )Di sini, ' pemilih CSS ” rujuk kepada satu atau lebih pemilih CSS.
Lihat contoh berikut.
Contoh
Pertama, masukkan jenis input dengan nilai pemegang tempat dan butang untuk mendapatkan dan menetapkan nilai teks input:
< id butang = 'dapatkan' > DAPATKAN butang >
< jenis input = 'teks' ID = 'set-input' pemegang tempat = 'Tetapkan Nilai' >
< id butang = 'set' > SET butang >
Seterusnya, ambil medan input dan butang yang ditambahkan menggunakan ' document.querySelector() ' kaedah:
biarkan butangGet = dokumen. querySelector ( '#dapat' ) ;biarkan butangSet = dokumen. querySelector ( '#set' ) ;
biarkan getInput = dokumen. querySelector ( '#input-get' ) ;
biarkan setInput = dokumen. querySelector ( '#input-set' ) ;
biarkan hasilnya = dokumen. querySelector ( '#hasil' ) ;
Kemudian, sertakan pengendali acara bernama ' klik ” untuk kedua-dua butang untuk mendapatkan dan menetapkan nilai, masing-masing:
butangDapatkan. addEventListener ( 'klik' , ( ) => {hasil. innerTeks = getInput. nilai ;
} ) ;
butangSet. addEventListener ( 'klik' , ( ) => {
getInput. nilai = setInput. nilai ;
} ) ;
Pengeluaran
Kami telah membincangkan kaedah paling mudah untuk mendapatkan dan menetapkan nilai teks input dalam JavaScript.
Kesimpulan
Untuk mendapatkan dan menetapkan nilai teks input dalam JavaScript, gunakan ' document.getElementById() ” kaedah atau yang
“ document.getElementByClassName() ” kaedah untuk mengakses medan input dan butang yang ditentukan berdasarkan id atau nama kelasnya dan kemudian tetapkan nilainya. Selain itu, ' document.querySelector() ” juga boleh digunakan untuk mendapatkan dan menetapkan nilai teks input dalam JavaScript. Blog ini menerangkan kaedah untuk mendapatkan dan menetapkan nilai teks input dalam JavaScript.