Acest articol va demonstra metodele de obținere și setare a valorilor textului de intrare în JavaScript.
Cum să obțineți și să setați valoarea textului de intrare în JavaScript?
Pentru a obține și a seta valoarea textului de intrare în JavaScript, utilizați:
- „ getElementById() ” metoda
- „ getElementByClassName() ” metoda
- „ querySelector() ” metoda
Parcurgeți fiecare dintre metodele menționate una câte una!
Metoda 1: Obțineți și setați valoarea textului de intrare în JavaScript folosind metoda document.getElementById()
„ getElementById() ” accesează un element cu ID-ul specificat. Această metodă poate fi aplicată pentru a accesa id-urile câmpurilor de introducere și butoanele pentru obținerea și setarea valorii textului.
Sintaxă
document. getElementById ( elemente )
Aici, ' elemente ” se referă la ID-ul specificat al unui element.
Exemplul de mai jos explică conceptul discutat.
Exemplu
În primul rând, includeți două câmpuri de tip de intrare și butoane separate pentru obținerea și setarea valorilor textului de intrare cu „ onclick ” evenimente care vor accesa funcțiile specificate:
< butonul la clic = „getText()” > Obțineți valoare buton >
< butonul la clic = „getAndSetText()” > Valoarea setată buton >
< tip de introducere = 'text' id = 'setText' Nume = 'setText' onclick = 'this.value = ''' />
Apoi, obțineți valoarea câmpului de intrare cu ajutorul metodei document.getElementById():
document. getElementById ( „getText” ) . valoare = „Introduceți aici” ;Acum, declarați o funcție numită „ getAndSetText() ”. Aici, preluați câmpul de intrare cu „ getText ” id și treceți valoarea de intrare următorului câmp de introducere având „ setText ” id:
funcţie getAndSetText ( ) {a fost setText = document. getElementById ( „getText” ) . valoare ;
document. getElementById ( „setText” ) . valoare = setText ;
}
În mod similar, definiți o funcție numită „ getText() ”. După aceea, obțineți câmpul de introducere cu „ getText ” id și transmiteți valoarea particulară în caseta de alertă pentru a obține valoarea textului de intrare:
funcţie getText ( ) {a fost getText = document. getElementById ( „getText” ) . valoare ;
alerta ( getText ) ;
}
Ieșire
Metoda 2: Obțineți și setați valoarea textului de intrare în JavaScript folosind metoda document.getElementByClassName()
„ getElementByClassName() ” accesează un element cu ajutorul numelui de clasă specificat. Această metodă, în mod similar, poate fi aplicată pentru a accesa clasa câmpului de introducere și butoanele pentru introducerea și setarea valorii textului.
Sintaxă
document. getElementsByClassName ( numele clasei )În sintaxa de mai sus, „ numele clasei ” reprezintă numele clasei de elemente.
Exemplu
Similar cu exemplul anterior, vom accesa mai întâi primul câmp de introducere cu „ getText ' numele clasei. Apoi, definiți o funcție numită „ getAndSetText() ” și obțineți câmpul de intrare specificat pe baza numelui clasei sale și setați valoarea în următorul câmp de introducere:
funcţie getAndSetText ( )
{
a fost setText = document. getElementByClassName ( „getText” ) . valoare ;
document. getElementById ( „setText” ) . valoare = setText ;
}
De asemenea, definiți o funcție numită „ getText() ”, adăugați numele de clasă al primului câmp de intrare și transmiteți valoarea particulară casei de alertă pentru a afișa valoarea preluată:
funcţie getText ( ) {a fost getText = document. getElementByClassName ( „getText” ) . valoare ;
alerta ( getText ) ;
}
Această implementare va produce următoarele rezultate:
Metoda 3: Obțineți și setați valoarea textului de intrare în Javascript folosind metoda „document.querySelector()”
„ document.querySelector() ” preia primul e coborât care se potrivește cu selectorul specificat, iar metoda addEventListener() poate adăuga un handler de evenimente la elementul selectat. Aceste metode pot fi aplicate pentru a obține id-ul câmpului de intrare și al butoanelor și pentru a le aplica un handler de evenimente.
Sintaxă
document. querySelector ( selectoare CSS )Aici, ' selectoare CSS ” se referă la unul sau mai mulți selectori CSS.
Uită-te la următorul exemplu.
Exemplu
În primul rând, includeți tipurile de introducere cu valorile substituenților și butoanele pentru obținerea și setarea valorilor textului de intrare:
< ID-ul butonului = 'obține' > OBȚINE buton >
< tip de introducere = 'text' id = 'set de intrare' substituent = „Setați valoarea” >
< ID-ul butonului = 'a stabilit' > A STABILIT buton >
Apoi, preluați câmpurile și butoanele de introducere adăugate folosind butonul „ document.querySelector() ” metoda:
let buttonGet = document. querySelector ( '#obține' ) ;let buttonSet = document. querySelector ( '#a stabilit' ) ;
lasa getInput = document. querySelector ( „#input-get” ) ;
lasă setInput = document. querySelector ( „#input-set” ) ;
lasa rezultatul = document. querySelector ( '#rezultat' ) ;
Apoi, includeți un handler de evenimente numit „ clic ” pentru ambele butoane pentru a obține și, respectiv, a seta valorile:
butonul Obține. addEventListener ( 'clic' , ( ) => {rezultat. innerText = getInput. valoare ;
} ) ;
ButonSet. addEventListener ( 'clic' , ( ) => {
getInput. valoare = setInput. valoare ;
} ) ;
Ieșire
Am discutat despre cele mai simple metode pentru obținerea și setarea valorii textului de intrare în JavaScript.
Concluzie
Pentru a obține și a seta valoarea textului de intrare în JavaScript, utilizați „ document.getElementById() ” sau metoda
„ document.getElementByClassName() ” pentru accesarea câmpului de introducere specificat și a butoanelor pe baza id-urilor sau a numelui clasei și apoi setați valorile acestora. În plus, „ document.querySelector() ” poate fi folosit și pentru obținerea și setarea valorilor textului de intrare în JavaScript. Acest blog a explicat metodele de obținere și setare a valorilor textului de intrare în JavaScript.