Tijdens het invullen van een bepaald formulier of een vragenlijst zijn er vaak situaties waarin het nodig is om een bepaald antwoord of melding weer te geven als reactie op de geselecteerde optie. Bijvoorbeeld het omgaan met meerkeuzevragen, enz. In dergelijke gevallen is het wijzigen van de labeltekst met JavaScript erg nuttig om de toegankelijkheid van HTML-formulieren en het algehele documentontwerp te verbeteren.
Hoe labeltekst wijzigen met JavaScript?
De volgende benaderingen kunnen worden gebruikt om labeltekst in JavaScript te wijzigen:
-
- “ innerlijkeHTML ' eigendom.
- “ innerText ' eigendom.
- jQuery ' tekst() ' en ' html() ” methoden.
Benadering 1: verander labeltekst in JavaScript met behulp van innerHTML-eigenschap
De ' innerlijkeHTML ” eigenschap retourneert de innerlijke HTML-inhoud van een element. Deze eigenschap kan worden gebruikt om het specifieke label op te halen en de tekst ervan te wijzigen in een nieuw toegewezen tekstwaarde.
Syntaxis
element.innerHTML
In de bovenstaande syntaxis:
-
- “ element ” verwijst naar het element waarop de specifieke eigenschap wordt toegepast om de HTML-inhoud te retourneren.
Voorbeeld
Doorloop het volgende codefragment om het genoemde concept duidelijk uit te leggen:
< centrum >< lichaam >
< label ID kaart = 'lbl' > DOM label >
< br >< br >
< knop bij klikken = 'labelText()' > Klik hier knop >
lichaam > centrum >
-
- Eerst binnen de “
” tag, inclusief de “ label ” met de opgegeven “ ID kaart ' en ' tekst ' waarden. - Maak daarna een knop met een bijgevoegde ' bij klikken ” gebeurtenis die de functie labelText() aanroept.
- Eerst binnen de “
Volg nu de onderstaande JavaScript-code:
functie labelText ( ) {laten get = document.getElementById ( 'lbl' )
get.innerHTML= 'De afgekorte naam is Document Object Model' ;
}
-
- Declareer een functie met de naam ' labelText() ”.
- In de definitie, toegang tot de id van de opgegeven “ label ' de ... gebruiken ' document.getElementById() ” methode.
- Pas ten slotte de eigenschap innerHTML toe en wijs een nieuwe ' tekst ” waarde toe aan het geopende label. Dit zal resulteren in het transformeren van de labeltekst naar een nieuwe tekstwaarde bij het klikken op de knop.
Uitgang:
In de bovenstaande uitvoer kan worden opgemerkt dat de tekstwaarde van ' label ” wordt zowel op de DOM als in de code gewijzigd in de “ elementen ' sectie.
Benadering 2: verander labeltekst in JavaScript met behulp van de innerText-eigenschap
De ' innerText ” eigenschap retourneert de tekstinhoud van het element. Deze eigenschap kan worden geïmplementeerd om een door de gebruiker ingevoerde waarde in het invoerveld toe te wijzen aan de toegewezen labeltekst.
Syntaxis
element.innerText
In de bovenstaande syntaxis:
-
- “ element ” geeft het element aan waarop de specifieke eigenschap wordt toegepast om de tekstuele inhoud te retourneren.
Voorbeeld
Het volgende voorbeeld demonstreert het genoemde concept:
< centrum >< lichaam >Voer een naam in: < invoer type = 'tekst' ID kaart = 'naam' waarde = '' automatisch aanvullen = 'uit' >
< p >< invoer type = 'knop' ID kaart = 'bt' waarde = 'Labeltekst wijzigen' bij klikken = 'labelText()' > p >
< label ID kaart = 'lbl' > N / EEN label >
lichaam > centrum >
-
- Wijs eerst een invoertekstveld toe met de opgegeven ' ID kaart ”. De ' nul ” waarde hier geeft aan dat de waarde wordt opgehaald van de gebruiker en autocomplete instelt op “ uit ” vermijdt de voorgestelde waarden.
- Voeg daarna een label toe met de gespecificeerde ' ID kaart ' en ' tekst ' waarde.
Voer nu in het JavaScript-codefragment de volgende stappen uit:
functie labelText ( ) {laten get = document.getElementById ( 'lbl' ) ;
laten naam = document.getElementById ( 'naam' ) .waarde;
get.innerText = naam;
}
-
- Definieer een functie met de naam ' labelText() ”. In de definitie, toegang tot het gemaakte label met behulp van de ' document.getElementById() ” methode.
- Herhaal op dezelfde manier de bovenstaande stap om toegang te krijgen tot het opgegeven invoertekstveld en de door de gebruiker ingevoerde waarde eruit te halen.
- Wijs ten slotte de door de gebruiker ingevoerde waarde uit de vorige stap toe aan het opgehaalde label. Hierdoor wordt de labeltekst gewijzigd in de door de gebruiker ingevoerde waarde in het invoertekstveld.
Uitgang:
In de bovenstaande output is het duidelijk dat aan de gewenste eis wordt voldaan.
Benadering 3: Labeltekst wijzigen in JavaScript met behulp van de jQuery text()- en html()-methoden
De ' tekst() ”-methode retourneert de tekstinhoud van de geselecteerde elementen. De “ html() ”-methode retourneert de innerHTML-inhoud van de geselecteerde elementen.
Syntaxis
$ ( selector ) .tekst ( )
In deze syntaxis:
-
- “ selector ” verwijst naar de tekstinhoud van het geopende element.
In de hierboven gegeven syntaxis:
-
- “ selector ” verwijst naar de innerHTML van het geopende element.
Voorbeeld
Dit voorbeeld illustreert het genoemde concept met behulp van jQuery-methoden.
Doorloop het onderstaande codefragment:
< script src = “https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js” > script >< centrum >< lichaam >
< label ID kaart = 'lbl1' > Dit is de volgende website: label >
< br >< br >
< label ID kaart = 'lbl2' > Inhoud: label >
< br >< br >
< knop bij klikken = 'labelText()' > Klik voor Website knop >
< knop bij klikken = 'labelText2()' > Klik voor Inhoud knop >
lichaam > centrum >
-
- Voeg eerst de “ jQuery ” bibliotheek om zijn methoden toe te passen.
- Daarna, binnen de “
” tag, voeg twee verschillende labels toe met de gespecificeerde “ ID kaart ' en tekstwaarde tegen elk van hen. - Wijs ook afzonderlijke knoppen toe aan elk van de gemaakte labels. Beide knoppen hebben een bijgevoegde ' bij klikken ” gebeurtenis die twee verschillende gespecificeerde functies oproept.
Ga nu door de volgende JavaScript-coderegels:
functie labelText ( ) {$ ( '#lbl1' ) .tekst ( 'Linux' )
}
functie labelText2 ( ) {
$ ( '#lbl2' ) .html ( 'JavaScript' )
}
-
- Declareer in de eerste stap een functie met de naam ' labelText() ”.
- In de definitie, toegang tot het label tegen de opgehaalde ' ID kaart ” en pas de “ tekst() ”-methode eraan toe. Dit zal ertoe leiden dat de tekstwaarde van het label wordt gewijzigd in de opgegeven waarde in de parameter.
- Definieer op dezelfde manier een functie met de naam ' labelText2() ”.
- Herhaal hier op dezelfde manier de hierboven besproken stap om toegang te krijgen tot het label. Pas in dit geval de ' html() ” methode. Deze methode werkt ook op dezelfde manier en retourneert de opgegeven tekstwaarde, waardoor de labeltekst wordt gewijzigd.
Uitgang:
In de bovenstaande uitvoer komt de eerste getransformeerde tekstwaarde van het label op het Document Object Model (DOM) overeen met de jQuery ' tekst() ” methode en de andere is een resultaat van de “ html() ” methode.
We hebben de benaderingen gecompileerd om labeltekst te wijzigen met behulp van JavaScript.
Conclusie
De ' innerlijkeHTML ” eigendom, de “ innerText 'eigenschap, of jQuery's' tekst() ' en ' html() ”-methoden kunnen worden gebruikt om labeltekst te wijzigen met behulp van JavaScript. De eigenschap innerHTML kan worden toegepast om het specifieke label op te halen en de tekstinhoud ervan te wijzigen in een nieuw toegewezen tekstwaarde. De eigenschap innerText kan worden geïmplementeerd om een nieuwe tekstwaarde toe te wijzen aan het geopende label, waardoor het wordt gewijzigd. De jQuery-aanpak kan worden gebruikt om de tekstwaarde van het label te transformeren met behulp van zijn twee methoden, wat resulteert in hetzelfde resultaat in de vorm van twee verschillende toegewezen tekstwaarden. Dit artikel demonstreerde de technieken om labeltekst te wijzigen met behulp van JavaScript.