- Kako preklopiti gumb v JavaScriptu?
- 1. primer: spreminjanje besedilnih sporočil s preklopom gumba
- 2. primer: preklop gumba za VKLOP/IZKLOP v JavaScriptu
Kako preklopiti gumb v JavaScriptu?
Pogojni stavek je osnovna zahteva za preklop gumba v JavaScriptu. Če želite to doseči, morate pridobiti element, nato pa se uporabi neka funkcija po meri, ki uporabi določeno operacijo za ta element. Funkcija je povezana z dogodkom onclick gumba. Tako da se ta funkcija izvede vsakič, ko kliknete gumb. Vadimo nekaj primerov za preklop gumba v JavaScriptu.
1. primer: spreminjanje besedilnih sporočil s preklopom gumba
Upoštevamo primer spreminjanja sporočila s preklopom gumba v JavaScriptu. Primer vsebuje kodo HTML in JavaScript, ki sta razloženi spodaj:
HTML koda
< html >
< h2 > Primer preklopa gumba < / h2 >
< div id = 'js' > Pritisnite gumb, da vidite čarovnijo < / div >
< gumb onclick = 'btntog()' > Gumb < / gumb >
< / html >
< scenarij src = 'test.js' >< / scenarij >
V kodi HTML je opis naslednji:
- A oznaka je ustvarjena z » id=js ”.
- Po tem se ustvari gumb, povezan z a 'btntog()' metoda. S pritiskom 'Gumb' , metoda ' btntog() ” se sproži.
- Na koncu datoteka JavaScript “test.js” se prenaša kot src znotraj
oznake. Koda za datoteko JavaScript ' test.js « je na voljo tukaj:
JavaScript koda
funkcijabtntog ( )
{
kje = dokument. getElementById ( 'js' ) ;
če ( t. notranjiHTML == 'Dobrodošli v Linuxhintu' ) {
t. notranjiHTML = 'Svet JavaScript' ; }
drugače {
t. notranjiHTML = 'Dobrodošli v Linuxhintu' ; }
}V tej kodi:
- getElementById se uporablja za ekstrahiranje elementa HTML ' js « in vrednost je shranjena v spremenljivki » t ”.
- Po tem, notranjiHTML lastnost je uporabljena v pogoju if za preverjanje besedila ' Dobrodošli v Linuxhintu ”.
- Če je pogoj resničen, je vsebina ' Dobrodošli v Linuxhintu ” se nadomesti z »Svet JavaScripta “.
- Če je pogoj napačen, besedilo “Dobrodošli v Linuxhintu” je kot vsebina HTML dodeljena oznaki div.
Izhod
Rezultat kaže, da preklop gumba vrne dve sporočili kot “Dobrodošli v Linuxhintu” in 'Svet JavaScripta' alternativno.
2. primer: preklop gumba za VKLOP/IZKLOP v JavaScriptu
Sledi primer za spreminjanje besedila v vrstici gumba. V tem primeru je ' PRIŽGI UGASNI ” spremeni vrednost s pritiskom na gumb. Kodi HTML in JavaScript sta na voljo tukaj:
HTML koda
< html >
< h2 > Primer preklopa gumba h2 >
< vrsta vnosa = 'gumb' id = 'myBtn' vrednost = 'IZKLOP'
onclick = 'datum();' >
< skript src = 'test.js' > scenarij >
html >Zgornja koda je opisana kot:
- Gumb, ki ga je mogoče klikniti in ima ID “myBtn” je ustvarjen in njegova vrednost je nastavljena na »IZKLOP« .
- S pritiskom na gumb se datum() metoda se bo sprožila.
- Na koncu, “test.js” je pritrjen na izvorno pot znotraj
oznaka.
JavaScript koda
funkcijatgl ( )
{
kje = dokument. getElementById ( 'myBtn' ) ;
če ( t. vrednost == 'ON' ) {
t. vrednost = 'IZKLOP' ; }
elseif ( t. vrednost == 'IZKLOP' ) {
t. vrednost = 'ON' ; }
}V tej kodi:
- A datum() metoda se uporablja za preklop gumba v JavaScriptu.
- Pri tej metodi izvlečete element HTML z uporabo getElementById lastnost, nato pa ji je dodan stavek if else-if.
- Če je “value==ON” , preklopite vrednost na »IZKLOP«. Če je vrednost IZKLOP, potem bo vrednost preklopljena na ' VKLOP” .
Izhod
Izhod pokaže, da je bil gumb preklopljen iz IZKLOP do VKLOP .
To je vse! Naučili ste se preklopiti gumb v JavaScriptu.
Zaključek
V JavaScriptu lahko gumb uporabite za preklapljanje med različnimi stanji lastnih vrednosti ali pa je katero koli funkcijo mogoče povezati z operacijo preklopa. The onclick() dogodek gumba je povezan s funkcijo. Ta članek pojasnjuje pregled preklapljanja gumba skupaj z dvema praktičnima primeroma. Prvi primer izvleče besedilo z notranjiHTML lastnost in jo spremeni s preklopnim gumbom. V drugem primeru se vrednost samega gumba spremeni s funkcijo po meri.