- Kā pārslēgt pogu JavaScript?
- 1. piemērs: īsziņu pārveidošana, pārslēdzot pogu
- 2. piemērs: IESLĒGŠANAS/IZSLĒGŠANAS poga pārslēgšanai JavaScript
Kā pārslēgt pogu JavaScript?
Nosacījuma priekšraksts ir pamatprasība, lai pārslēgtu pogu JavaScript. Lai to panāktu, jums ir jāiegūst elements un pēc tam tiek piemērota pielāgota funkcija, lai šim elementam piemērotu kādu konkrētu darbību. Funkcija ir saistīta ar pogas onclick notikumu. Tā, ka, noklikšķinot uz pogas, šī funkcija tiks izpildīta. Praktizēsim dažus piemērus, kā pārslēgt pogu JavaScript.
1. piemērs: īsziņu pārveidošana, pārslēdzot pogu
Piemērs tiek uzskatīts par ziņojuma modificēšanu, pārslēdzot pogu JavaScript. Piemērā ir ietverts HTML un JavaScript kods, kas ir paskaidrots tālāk:
HTML kods
< html >
< h2 > Piemērs pogas pārslēgšanai < / h2 >
< div id = 'js' > Nospiediet pogu, lai redzētu maģiju < / div >
< pogu onclick = 'btntog()' > Poga < / pogu >
< / html >
< skripts src = 'test.js' >< / skripts >
HTML kodā apraksts ir šāds:
- A tags ir izveidots ar ' id=js ”.
- Pēc tam tiek izveidota poga, kas saistīta ar a “btntog()” metodi. Nospiežot 'Poga' , metode ' btntog() ” tiek aktivizēts.
- Galu galā JavaScript fails “test.js” tiek nodots kā src ietvaros
tagus. JavaScript faila kods ' test.js ” ir sniegts šeit:
JavaScript kods
funkcijabtntog ( )
{
kur = dokumentu. getElementById ( 'js' ) ;
ja ( t. innerHTML == 'Laipni lūdzam Linuxhint' ) {
t. innerHTML = 'JavaScript pasaule' ; }
cits {
t. innerHTML = 'Laipni lūdzam Linuxhint' ; }
}Šajā kodā:
- getElementById tiek izmantots, lai izvilktu HTML elementu ' js un vērtība tiek saglabāta mainīgajā t ”.
- Pēc tam, innerHTML rekvizīts tiek izmantots ja nosacījumā, lai pārbaudītu tekstu “ Laipni lūdzam Linuxhint ”.
- Ja nosacījums ir patiess, saturs ' Laipni lūdzam Linuxhint ” tiek aizstāts ar “JavaScript pasaule “.
- Ja nosacījums ir nepatiess, teksts “Laipni lūdzam Linuxhint” ir piešķirts kā HTML saturs tagam div.
Izvade
Izvade parāda, ka, pārslēdzot pogu, tiek parādīti divi ziņojumi kā “Laipni lūdzam Linuxhint” un “JavaScript pasaule” alternatīvi.
2. piemērs: IESLĒGŠANAS/IZSLĒGŠANAS poga pārslēgšanai JavaScript
Tālāk ir sniegts piemērs, lai mainītu pogas ietverto tekstu. Šajā piemērā ' IESLĒGTS IZSLĒGTS ” teksts mainīs vērtību, nospiežot pogu. HTML un JavaScript kodi ir sniegti šeit:
HTML kods
< html >
< h2 > Piemērs pogas pārslēgšanai h2 >
< ievades veids = 'poga' id = 'myBtn' vērtību = 'IZSLĒGTS'
onclick = 'datums();' >
< skripts src = 'test.js' > skripts >
html >Iepriekš minētais kods ir aprakstīts šādi:
- Noklikšķināma poga ar ID “myBtn” tiek izveidots un iestatīta tā vērtība “IZSLĒGTS” .
- Nospiežot pogu, datums() metode tiks aktivizēta.
- Beigās, “test.js” ir pievienots avota ceļam iekšā
tagu.
JavaScript kods
functiontgl ( )
{
kur = dokumentu. getElementById ( 'myBtn' ) ;
ja ( t. vērtību == 'IESLĒGTS' ) {
t. vērtību = 'IZSLĒGTS' ; }
elseif ( t. vērtību == 'IZSLĒGTS' ) {
t. vērtību = 'IESLĒGTS' ; }
}Šajā kodā:
- A datums() metode tiek izmantota, lai pārslēgtu pogu JavaScript.
- Izmantojot šo metodi, jūs izņemat HTML elementu, izmantojot getElementById rekvizītu, un pēc tam tam tiek pievienots paziņojums if else-if.
- Ja “value==ON” , pārslēdziet vērtību uz “IZSLĒGTS”. Ja vērtība ir IZSLĒGTS, tad vērtība tiks pārslēgta uz ' IESL.” .
Izvade
Izvade parāda, ka poga ir pārslēgta no IZSLĒGTS uz IESL .
Tas ir viss! Jūs esat iemācījušies pārslēgt pogu JavaScript.
Secinājums
JavaScript var izmantot pogu, lai pārslēgtos starp dažādiem tās vērtību stāvokļiem, vai jebkuru funkciju var saistīt ar pārslēgšanas darbību. The onclick () pogas notikums ir saistīts ar funkciju. Šajā rakstā ir izskaidrots pārskats par pogas pārslēgšanu, kā arī divi praktiski piemēri. Pirmajā piemērā teksts ir izvilkts ar innerHTML rekvizītu un maina to, izmantojot pārslēgšanas pogu. Otrajā piemērā pašas pogas vērtība tiek mainīta, izmantojot pielāgotu funkciju.