Ipapakita ng gabay na ito ang layunin, at gumagana ng kaganapang 'onchange' sa JavaScript.
Paano Gumamit ng isang 'onchange' na Kaganapan sa JavaScript?
Ang ' onchange ” na kaganapan ay nag-a-activate kapag ang halaga ng tinukoy na elemento ng HTML ay nabago. Kapag nag-trigger ang kaganapang ito, ang nauugnay na function ng JavaScript ay ipapatupad upang maisagawa ang partikular na gawain.
Syntax
bagay. onchange = function ( ) { myScript } ;
Sa itaas na syntax:
- elemento: Tinutukoy nito ang partikular na elemento ng HTML.
- function(): Kinakatawan nito ang tinukoy na function na ipapatawag sa trigger ng kaganapan.
- myScript: Ito ay tumutukoy sa kahulugan ng function ng JavaScript upang maisagawa ang partikular na gawain kapag nangyari ang kaganapang 'onchange'.
Syntax(Na may Paraang 'addEventListener()')
bagay. addEventListener ( 'pagbabago' , myScript ) ;
Sa syntax sa itaas, ang ' addEventListener() 'Ang pamamaraan ay gumagamit ng ' onchange ” na kaganapan upang isagawa ang JavaScript function para sa pagsasagawa ng iba't ibang gawain.
Halimbawa 1: Paglalapat ng “onchange” Event sa Pagpapakita ng Napiling Halaga Gamit ang Basic Syntax
Sa sitwasyong ito, ang isang 'onchange' na kaganapan ay nauugnay sa isang listahan ng mga opsyon upang ipakita ang binagong halaga ng opsyon at i-invoke ang kaukulang JavaScript function.
HTML Code
Tingnan ang sumusunod na HTML code:
< h2 > onchange Kaganapan sa JavaScript h2 >< p > Pumili ng ibang wika mula sa listahan. p >
< piliin ang id = 'demo' onchange = 'Sample()' >
< halaga ng opsyon = 'HTML' > HTML opsyon >
< halaga ng opsyon = 'CSS' > CSS opsyon >
< halaga ng opsyon = 'JavaScript' > JavaScript opsyon >
pumili >
< p id = 'P1' > p >
Sa code sa itaas:
- Una, tukuyin ang isang subheading gamit ang ' ” tag.
- Susunod, magdagdag ng isang talata na may nakasaad na pahayag.
- Pagkatapos nito, ang ' Ang tag na ' ay gumagawa ng isang drop-down na listahan na may nakatalagang id ' demo ' at ang ' onchange 'ang kaganapan ay nagre-redirect sa function' Sample() ”, ayon sa pagkakabanggit.
- Sa katawan ng tag na '
- Panghuli, ang isang walang laman na talata ay nilikha gamit ang isang id ' P1 ” upang ipakita ang napili/binagong halaga mula sa listahan ng opsyon.
JavaScript Code
Ngayon, pangkalahatang-ideya ng sumusunod na JavaScript code:
< iskrip >Sample ng function ( ) {
saan = dokumento. getElementById ( 'demo' ) . halaga ;
dokumento. getElementById ( 'P1' ) . innerHTML = 'Ang Napiling Opsyon ay: ' + t ;
}
iskrip >
Sa itaas na bloke ng code:
- Una sa lahat, ipahayag ang isang function na pinangalanang ' Sample() ”.
- Sa kahulugan nito, ilapat ang ' getElementById() ” paraan upang ma-access ang halaga ng napiling opsyon mula sa listahan ng mga opsyon sa pamamagitan ng “ halaga ” ari-arian.
- Panghuli, ipakita ang halaga gamit ang ' innerHTML ” ari-arian.
Output
Tulad ng nakikita sa output, sa pagpili ng isang opsyon mula sa drop-down, ang 'onchange' na kaganapan ay nagti-trigger at humihiling ng kaukulang function.
Halimbawa 2: Paglalapat ng “onchange” Event para Baguhin ang Input Field Text sa Uppercase Gamit ang “addEventListener()” Method Syntax
Ipinapaliwanag ng halimbawang ito ang 'onchange' na kaganapan na gumagana sa pamamagitan ng pagpapalit ng input text field sa 'Uppercase' sa tulong ng 'addEventListener()' method.
HTML Code
Una, dumaan sa HTML code na ibinigay sa ibaba:
< h2 > onchange Kaganapan sa JavaScript h2 >Pangalan : < uri ng input = 'text' id = 'demo' >
< pindutan > Ipasa pindutan >
Sa HTML code sa itaas:
- Tukuyin ang isang subheading ng antas 2 sa pamamagitan ng “ ” tag.
- Susunod, magdagdag ng ' ” field sa pamamagitan ng label na “ Pangalan ”, uri ng nilalaman “ text ”, at ang nauugnay na id “ demo ”, ayon sa pagkakabanggit.
- Panghuli, isama ang isang pindutan gamit ang ' ” tag.
JavaScript Code
Susunod, tingnan ang sumusunod na JavaScript code:
< iskrip >dokumento. getElementById ( 'demo' ) . addEventListener ( 'pagbabago' , Sample ) ;
Sample ng function ( ) {
saan = dokumento. getElementById ( 'demo' ) ;
t. halaga = t. halaga . toUpperCase ( ) ;
}
iskrip >
Sa block ng code na ito:
- Una, ang ' document.getElementById() 'Ang pamamaraan ay gumagamit ng ' pagbabago ' kaganapan na magreresulta sa pagbabago ng halaga ng input text field na may id ' demo ” sa pag-click sa pindutan.
- Susunod, ang function na 'Sample()' ay tinukoy na gumagamit ng 'document.getElementById()' na paraan upang ma-access ang input text field na 'demo' at pagkatapos ay baguhin ang halaga nito sa 'Uppercase' sa pamamagitan ng ' UpperCase() ” paraan.
Output
Gaya ng nakikita, ang input text ay na-convert sa Uppercase sa pag-click ng button.
Konklusyon
Ang JavaScript ay nag-aalok ng karaniwang ginagamit na ' onchange ” kaganapan na nagti-trigger sa sandaling magbago ang estado ng halaga ng isang partikular na elemento. Ito ay katulad ng ' onput ” kaganapan ngunit ang 'oninput' ay nangyayari kaagad habang nagbabago ang halaga habang ang 'onchange' na kaganapan ay nagti-trigger kapag ang halaga ng kaganapan ay nawalan ng focus. Ipinakita ng gabay na ito ang layunin, paggawa, at paggamit ng kaganapang 'onchange' sa JavaScript.