Tämä kirjoitus esittelee menetelmät syöttötekstiarvojen saamiseksi ja asettamiseen JavaScriptissä.
Kuinka saada ja asettaa syöttötekstin arvo JavaScriptissä?
Voit saada ja asettaa syöttötekstin arvon JavaScriptissä käyttämällä:
- ' getElementById() ”menetelmä
- ' getElementByClassName() ”menetelmä
- ' querySelector() ”menetelmä
Käy läpi kukin mainituista menetelmistä yksitellen!
Tapa 1: Hae ja aseta syöttötekstiarvo JavaScriptissä käyttämällä document.getElementById()-menetelmää
' getElementById() ” -menetelmä käyttää elementtiä, jolla on määritetty tunnus. Tätä menetelmää voidaan käyttää syöttökenttien ja painikkeiden tunnistetietojen saamiseksi tekstiarvon saamiseksi ja asettamiseen.
Syntaksi
asiakirja. getElementById ( elementtejä )
Täällä, ' elementtejä ” viittaa elementin määritettyyn tunnukseen.
Alla oleva esimerkki selittää käsiteltyä käsitettä.
Esimerkki
Sisällytä ensin kaksi syöttötyyppikenttää ja erilliset painikkeet syöttötekstin arvojen hakemiseen ja asettamiseen ' klikkaamalla 'tapahtumat, jotka pääsevät määritettyihin toimintoihin:
< painiketta onclick = 'getText()' > Hanki arvoa -painiketta >
< painiketta onclick = 'getAndSetText()' > Aseta arvo -painiketta >
< syötteen tyyppi = 'teksti' id = 'setText' nimi = 'setText' klikkaamalla = 'this.value = '' />
Hanki sitten syöttökentän arvo document.getElementById()-menetelmän avulla:
asiakirja. getElementById ( 'getText' ) . arvo = 'Syötä tähän' ;Ilmoita nyt funktio nimeltä ' getAndSetText() ”. Täältä hae syöttökenttä ' getText ' id ja välitä syöttöarvo seuraavaan syöttökenttään, jossa on ' setText ”ID:
toiminto getAndSetText ( ) {oli setText = asiakirja. getElementById ( 'getText' ) . arvo ;
asiakirja. getElementById ( 'setText' ) . arvo = setText ;
}
Samoin määritä funktio nimeltä ' getText() ”. Hae sen jälkeen syöttökenttä ' getText ” id ja välitä tietty arvo hälytysruutuun syöttötekstin arvon saamiseksi:
toiminto getText ( ) {oli getText = asiakirja. getElementById ( 'getText' ) . arvo ;
hälytys ( getText ) ;
}
Lähtö
Tapa 2: Hae ja aseta syöttötekstiarvo JavaScriptissä käyttämällä document.getElementByClassName() -menetelmää
' getElementByClassName() ” -menetelmä käyttää elementtiä määritetyn luokan nimen avulla. Tätä menetelmää voidaan käyttää samalla tavalla syöttökentän luokkaan ja painikkeisiin pääsyä varten tekstiarvon syöttämiseen ja asettamiseen.
Syntaksi
asiakirja. getElementsByClassName ( luokan nimi )Yllä olevassa syntaksissa ' luokan nimi ” edustaa elementtien luokan nimeä.
Esimerkki
Kuten edellisessä esimerkissä, pääsemme ensin ensimmäiseen syöttökenttään ' getText ' luokan nimi. Määritä sitten funktio nimeltä ' getAndSetText() ' ja hanki määritetty syöttökenttä sen luokan nimen perusteella ja aseta arvo seuraavaan syöttökenttään:
toiminto getAndSetText ( )
{
oli setText = asiakirja. getElementByClassName ( 'getText' ) . arvo ;
asiakirja. getElementById ( 'setText' ) . arvo = setText ;
}
Samoin määritä funktio nimeltä ' getText() ”, lisää ensimmäisen syöttökentän luokan nimi ja välitä tietty arvo hälytysruutuun, jotta haettu arvo näytetään:
toiminto getText ( ) {oli getText = asiakirja. getElementByClassName ( 'getText' ) . arvo ;
hälytys ( getText ) ;
}
Tämä toteutus tuottaa seuraavan tuloksen:
Tapa 3: Hanki ja aseta syöttötekstiarvo Javascriptissä käyttämällä 'document.querySelector()' -menetelmää
' document.querySelector() ” hakee ensimmäisen e meni alas joka vastaa määritettyä valitsinta, ja addEventListener()-metodi voi lisätä tapahtumakäsittelijän valittuun elementtiin. Näitä menetelmiä voidaan soveltaa syöttökentän ja painikkeiden tunnistetietojen saamiseksi ja tapahtumakäsittelijän käyttöönottamiseksi.
Syntaksi
asiakirja. querySelector ( CSS-valitsimet )Täällä, ' CSS-valitsimet ” viittaa yhteen tai useampaan CSS-valitsimeen.
Katso seuraava esimerkki.
Esimerkki
Sisällytä ensin syöttötyypit niiden paikkamerkkiarvoineen ja painikkeet syöttötekstin arvojen hakemiseen ja asettamiseen:
< painikkeen tunnus = 'saada' > SAADA -painiketta >
< syötteen tyyppi = 'teksti' id = 'syöttösarja' paikanpitäjä = 'Aseta arvo' >
< painikkeen tunnus = 'aseta' > ASETA -painiketta >
Hae seuraavaksi lisätyt syöttökentät ja painikkeet ' document.querySelector() 'menetelmä:
anna painikeGet = asiakirja. querySelector ( '#saada' ) ;anna painikeSet = asiakirja. querySelector ( '#aseta' ) ;
anna saadaInput = asiakirja. querySelector ( '#syöttö-get' ) ;
anna setInput = asiakirja. querySelector ( '#input-set' ) ;
anna tulosta = asiakirja. querySelector ( '#tulos' ) ;
Lisää sitten tapahtumakäsittelijä nimeltä ' klikkaus ” molemmille painikkeille saadaksesi ja asettaaksesi arvot vastaavasti:
painike Hanki. addEventListener ( 'klikkaus' , ( ) => {tulos. sisäteksti = getInput. arvo ;
} ) ;
painikeSet. addEventListener ( 'klikkaus' , ( ) => {
getInput. arvo = setInput. arvo ;
} ) ;
Lähtö
Olemme keskustelleet yksinkertaisimmista tavoista saada ja asettaa syöttötekstiarvo JavaScriptissä.
Johtopäätös
Jos haluat saada ja asettaa syöttötekstin arvon JavaScriptissä, käytä ' document.getElementById() ”menetelmä tai
' document.getElementByClassName() ” -menetelmää, jolla pääset määritettyyn syöttökenttään ja painikkeisiin niiden tunnuksien tai luokan nimen perusteella ja aseta sitten niiden arvot. Lisäksi ' document.querySelector() ” voidaan käyttää myös JavaScriptin syöttötekstiarvojen hakemiseen ja asettamiseen. Tämä blogi selitti tavat saada ja asettaa syöttötekstiarvot JavaScriptissä.