- Kuidas JavaScriptis nuppu sisse lülitada?
- Näide 1: Tekstisõnumite muutmine nupu ümberlülitamisega
- Näide 2: JavaScriptis SISSE/VÄLJA lülitamine
Kuidas JavaScriptis nuppu sisse lülitada?
Tingimuslause on JavaScriptis nupu ümberlülitamise põhinõue. Selle saavutamiseks peate hankima elemendi ja seejärel rakendatakse mõnda kohandatud funktsiooni, et rakendada sellele elemendile teatud toiming. Funktsioon on seotud nupu onclick sündmusega. Nii et iga kord, kui nuppu klõpsate, käivitatakse see funktsioon. Harjutame mõnda näidet JavaScriptis nupu ümberlülitamiseks.
Näide 1: Tekstisõnumite muutmine nupu ümberlülitamisega
Näitena käsitletakse sõnumi muutmist JavaScriptis nupu ümberlülitamisega. Näide sisaldab HTML-i ja JavaScripti koodi, mida selgitatakse allpool:
HTML kood
< html >
< h2 > Näide nupu ümberlülitamiseks < / h2 >
< div id = 'js' > Maagia nägemiseks vajutage nuppu < / div >
< nuppu onclick = 'btntog()' > Nupp < / nuppu >
< / html >
< stsenaarium src = 'test.js' >< / stsenaarium >
HTML-koodis on kirjeldus järgmine:
- A silt luuakse ' id=js ”.
- Pärast seda luuakse nupp, mis on seotud a-ga 'btntog()' meetod. Vajutades 'Nupp' , meetod' btntog() ” käivitub.
- Lõpuks JavaScripti fail 'test.js' on läbitud kui src sees
JavaScripti kood
funktsioonbtntog ( )
{
kus = dokument. getElementById ( 'js' ) ;
kui ( t. sisemine HTML == 'Tere tulemast Linuxhinti' ) {
t. sisemine HTML = 'JavaScripti maailm' ; }
muidu {
t. sisemine HTML = 'Tere tulemast Linuxhinti' ; }
}Selles koodis:
- getElementById kasutatakse HTML-i elemendi ekstraktimiseks ' js ' ja väärtus salvestatakse muutujasse ' t ”.
- Pärast seda, sisemine HTML atribuuti kasutatakse tingimuses if, et kontrollida teksti ' Tere tulemast Linuxhinti ”.
- Kui tingimus on tõene, on sisu ' Tere tulemast Linuxhinti ” asendatakse tekstiga 'JavaScripti maailm “.
- Kui tingimus on vale, siis tekst 'Tere tulemast Linuxhinti' määratakse HTML-sisuna sildile div.
Väljund
Väljund näitab, et nupu ümberlülitamine tagastab kaks teadet kui 'Tere tulemast Linuxhinti' ja 'JavaScripti maailm' alternatiivselt.
Näide 2: JavaScriptis SISSE/VÄLJA lülitamine
Nupu tekstisisese teksti muutmiseks järgitakse näidet. Selles näites on ' SISSE VÄLJA ” tekst muudab väärtust, vajutades nuppu. HTML- ja JavaScripti koodid on esitatud siin:
HTML kood
< html >
< h2 > Näide nupu ümberlülitamiseks h2 >
< sisendi tüüp = 'nupp' id = 'myBtn' väärtus = 'VÄLJAS'
onclick = 'kuupäev ();' >
< skript src = 'test.js' > stsenaarium >
html >Ülaltoodud koodi kirjeldatakse järgmiselt:
- Klõpsatav nupp, millel on ID 'myBtn' luuakse ja selle väärtus määratakse 'VÄLJAS' .
- Nupu vajutamisel kuvatakse kuupäev () meetod käivitub.
- Lõpuks, 'test.js' on lisatud sees olevale lähteteele