Den här guiden kommer att visa syftet och funktionen för 'onchange'-händelsen i JavaScript.
Hur använder man en 'onchange'-händelse i JavaScript?
den ' vid förändring ”-händelsen aktiveras när värdet på det angivna HTML-elementet ändras. När denna händelse utlöses, körs den associerade JavaScript-funktionen för att utföra den specifika uppgiften.
Syntax
objekt. vid förändring = fungera ( ) { myScript } ;
I ovanstående syntax:
- element: Det betecknar det särskilda HTML-elementet.
- fungera(): Den representerar den definierade funktionen som kommer att anropas vid händelseutlösaren.
- myScript: Det hänvisar till JavaScript-funktionsdefinitionen för att utföra den specifika uppgiften när 'onchange'-händelsen inträffar.
Syntax(Med metoden 'addEventListener()')
objekt. addEventListener ( 'förändra' , myScript ) ;
I ovanstående syntax, ' addEventListener() ”-metoden använder ” vid förändring ” händelse för att köra JavaScript-funktionen för att utföra olika uppgifter.
Exempel 1: Tillämpa händelsen 'onchange' för att visa valt värde med hjälp av grundläggande syntax
I det här scenariot är en 'onchange'-händelse associerad med en alternativlista för att visa det ändrade alternativvärdet och anropa motsvarande JavaScript-funktion.
HTML-kod
Ta en titt på följande HTML-kod:
< h2 > vid förändring Händelse i JavaScript h2 >< sid > Välj ett annat språk från listan. sid >
< välj id = 'demo' vid förändring = 'Prov()' >
< optionens värde = 'HTML' > HTML alternativ >
< optionens värde = 'CSS' > CSS alternativ >
< optionens värde = 'JavaScript' > JavaScript alternativ >
Välj >
< p id = 'P1' > sid >
I ovanstående kod:
- Definiera först en underrubrik med hjälp av ' '-tagg.
- Lägg sedan till ett stycke med det angivna uttalandet.
- Efter det kommer '
' taggen skapar en rullgardinslista med ett tilldelat id ' demo ' och den ' vid förändring ' händelse omdirigerar till funktionen ' Prov() ”, respektive. - I brödtexten av taggen '
' anges en lista med alternativ med hjälp av ' '-tagg. - Slutligen skapas ett tomt stycke med ett id ' P1 ” för att visa det valda/ändrade värdet från alternativlistan.
JavaScript-kod
Nu, översikt över följande JavaScript-kod:
< manus >funktionsexempel ( ) {
var t = dokumentera. getElementById ( 'demo' ) . värde ;
dokumentera. getElementById ( 'P1' ) . innerHTML = 'Det valda alternativet är: ' + t ;
}
manus >
I ovanstående kodblock:
- Först av allt, deklarera en funktion som heter ' Prov() ”.
- I sin definition, tillämpa ' getElementById() ”-metoden för att komma åt värdet för det valda alternativet från alternativlistan via ” värde ' fast egendom.
- Till sist, visa värdet med hjälp av ' innerHTML ' fast egendom.
Produktion
Som framgår av utgången, när du väljer ett alternativ från rullgardinsmenyn, utlöser och anropar 'onchange'-händelsen motsvarande funktion.
Exempel 2: Använda 'onchange'-händelse för att ändra inmatningsfältstext med versaler med hjälp av 'addEventListener()' metodsyntax
Det här exemplet förklarar 'onchange'-händelsen som fungerar genom att ändra inmatningstextfältet till 'versaler' med hjälp av metoden 'addEventListener()'.
HTML-kod
Gå först igenom HTML-koden nedan:
< h2 > vid förändring Händelse i JavaScript h2 >namn : < ingångstyp = 'text' id = 'demo' >
< knapp > Skicka in knapp >
I HTML-koden ovan:
- Definiera en underrubrik för nivå 2 via ' '-tagg.
- Lägg sedan till en '
' fält vid etiketten ' namn ', innehållstyp ' text ' och det associerade id ' demo ”, respektive. - Till sist, inkludera en knapp med '
'-tagg.
JavaScript-kod
Titta sedan på följande JavaScript-kod:
< manus >dokumentera. getElementById ( 'demo' ) . addEventListener ( 'förändra' , Prov ) ;
funktionsexempel ( ) {
var t = dokumentera. getElementById ( 'demo' ) ;
t. värde = t. värde . till versaler ( ) ;
}
manus >
I detta kodblock:
- Först, ' document.getElementById() ”-metoden använder ” förändra ” händelse som kommer att resultera i att värdet på inmatningstextfältet med id ” demo ” vid knappklick.
- Därefter definieras funktionen 'Sample()' som använder metoden 'document.getElementById()' för att komma åt inmatningstextfältet 'demo' och sedan ändrar dess värde till 'Verlor' via ' Versal() 'metoden.
Produktion
Som framgår har inmatningstexten konverterats till versaler vid knapptryckning.
Slutsats
JavaScript erbjuder det vanliga ' vid förändring ” händelse som utlöses så snart tillståndet för värdet för ett visst element ändras. Det liknar ' oningång ”-händelse men ”oninput” inträffar omedelbart när värdet ändras medan ”onchange”-händelsen utlöses när värdet på händelsen tappar fokus. Den här guiden visade målet, funktionen och användningen av 'onchange'-händelsen i JavaScript.