- Kuinka vaihtaa painiketta JavaScriptissä?
- Esimerkki 1: Tekstiviestien muokkaaminen painikkeella
- Esimerkki 2: ON/OFF-painikkeen vaihtaminen JavaScriptissä
Kuinka vaihtaa painiketta JavaScriptissä?
Ehdollinen lauseke on perusedellytys painikkeen vaihtamiselle JavaScriptissä. Tämän saavuttamiseksi sinun on hankittava elementti ja sitten käytetään mukautettua toimintoa tietyn toiminnon soveltamiseksi kyseiseen elementtiin. Toiminto liittyy painikkeen onclick-tapahtumaan. Jotta toiminto suoritetaan aina, kun painiketta napsautetaan. Harjoitellaan joitain esimerkkejä painikkeen vaihtamiseksi JavaScriptissä.
Esimerkki 1: Tekstiviestien muokkaaminen painikkeella
Esimerkkinä pidetään viestin muokkaamista vaihtamalla painiketta JavaScriptissä. Esimerkki sisältää HTML- ja JavaScript-koodin, jotka selitetään alla:
HTML-koodi
< html >
< h2 > Esimerkki painikkeen vaihtamisesta < / h2 >
< div id = 'js' > Paina painiketta nähdäksesi taikuuden < / div >
< -painiketta klikkaamalla = 'btntog()' > Painike < / -painiketta >
< / html >
< käsikirjoitus src = 'test.js' >< / käsikirjoitus >
HTML-koodissa kuvaus on seuraava:
- A tagi luodaan ' id=js ”.
- Tämän jälkeen luodaan painike, joka liittyy a 'btntog()' menetelmä. Painamalla 'painike' , menetelmä' btntog() ' laukeaa.
- Lopulta JavaScript-tiedosto 'test.js' on hyväksytty muodossa src sisällä
JavaScript-koodi
toimintobtntog ( )
{
missä = asiakirja. getElementById ( 'js' ) ;
jos ( t. innerHTML == 'Tervetuloa Linuxhintiin' ) {
t. innerHTML = 'JavaScript-maailma' ; }
muu {
t. innerHTML = 'Tervetuloa Linuxhintiin' ; }
}Tässä koodissa:
- getElementById käytetään purkamaan HTML-elementti ' js ' ja arvo on tallennettu muuttujaan ' t ”.
- Sen jälkeen, innerHTML ominaisuutta käytetään if-ehdossa tekstin tarkistamiseksi ' Tervetuloa Linuxhintiin ”.
- Jos ehto on totta, sisältö ' Tervetuloa Linuxhintiin ” korvataan tekstillä 'JavaScript-maailma '.
- Jos ehto on epätosi, teksti 'Tervetuloa Linuxhintiin' on määritetty HTML-sisällöksi div-tunnisteeseen.
Lähtö
Tulos näyttää, että painikkeen vaihtaminen palauttaa kaksi viestiä muodossa 'Tervetuloa Linuxhintiin' ja 'JavaScript-maailma' vaihtoehtoisesti.
Esimerkki 2: ON/OFF-painikkeen vaihtaminen JavaScriptissä
Seuraavassa on esimerkki painikkeen tekstin muuttamisesta. Tässä esimerkissä ' ON/OFF ” teksti muuttaa arvoa vaihtoehtoisesti painamalla painiketta. HTML- ja JavaScript-koodit ovat täällä:
HTML-koodi
< html >
< h2 > Esimerkki painikkeen vaihtamisesta h2 >
< syötteen tyyppi = 'painike' id = 'myBtn' arvo = 'VINOSSA'
klikkaamalla = 'Päivämäärä();' >
< script src = 'test.js' > käsikirjoitus >
html >Yllä oleva koodi on kuvattu seuraavasti:
- Napsautettava painike, jolla on tunnus 'myBtn' luodaan ja sen arvo asetetaan 'VINOSSA' .
- Painamalla painiketta, Päivämäärä() menetelmä käynnistyy.
- Lopussa, 'test.js' on liitetty sisällä olevaan lähdepolkuun