- Kako promijeniti gumb u JavaScriptu?
- Primjer 1: Promjena tekstualnih poruka prebacivanjem gumba
- Primjer 2: Prebacivanje ON/OFF gumba u JavaScriptu
Kako promijeniti gumb u JavaScriptu?
Uvjetna izjava osnovni je uvjet za prebacivanje gumba u JavaScriptu. Da biste to postigli, trebate nabaviti element, a zatim se primijeniti neka prilagođena funkcija za primjenu određene operacije na taj element. Funkcija je povezana s onclick događajem gumba. Tako da će se ta funkcija izvršiti kad god se pritisne gumb. Vježbajmo neke primjere za prebacivanje gumba u JavaScriptu.
Primjer 1: Promjena tekstualnih poruka prebacivanjem gumba
Razmatra se primjer izmjene poruke prebacivanjem gumba u JavaScriptu. Primjer se sastoji od HTML i JavaScript koda, koji su objašnjeni u nastavku:
HTML kôd
< html >
< h2 > Primjer prebacivanja gumba < / h2 >
< div iskaznica = 'js' > Pritisnite gumb da vidite magiju < / div >
< dugme na klik = 'btntog()' > Dugme < / dugme >
< / html >
< skripta src = 'test.js' >< / skripta >
U HTML kodu, opis je sljedeći:
- A oznaka je stvorena s ' id=js ”.
- Nakon toga se stvara gumb povezan s a “btntog()” metoda. Pritiskom 'Dugme' , način ' btntog() ” se pokreće.
- Na kraju, JavaScript datoteka “test.js” prenosi se kao src unutar
oznake. Kôd za JavaScript datoteku ' test.js ” nalazi se ovdje:
JavaScript kod
funkcijabtntog ( )
{
gdje = dokument. getElementById ( 'js' ) ;
ako ( t. unutarnjiHTML == 'Dobro došli u Linuxhint' ) {
t. unutarnjiHTML = 'JavaScript svijet' ; }
drugo {
t. unutarnjiHTML = 'Dobro došli u Linuxhint' ; }
}U ovom kodu:
- getElementById koristi se za izdvajanje HTML elementa ' js ”, a vrijednost je pohranjena u varijabli “ t ”.
- Nakon toga, unutarnjiHTML svojstvo se koristi u uvjetu if za provjeru teksta ' Dobrodošli u Linuxhint ”.
- Ako je uvjet istinit, sadržaj ' Dobrodošli u Linuxhint ” zamjenjuje se s “JavaScript svijet “.
- Ako je uvjet lažan, tekst “Dobro došli u Linuxhint” dodjeljuje se kao HTML sadržaj oznaci div.
Izlaz
Izlaz pokazuje da prebacivanje gumba vraća dvije poruke kao “Dobro došli u Linuxhint” i “JavaScript svijet” alternativno.
Primjer 2: Prebacivanje ON/OFF gumba u JavaScriptu
Slijedi primjer za promjenu umetnutog teksta gumba. U ovom primjeru, ' UKLJUČENO, ISKLJUČENO ” tekst će alternativno promijeniti vrijednost pritiskom na gumb. HTML i JavaScript kodovi navedeni su ovdje:
HTML kôd
< html >
< h2 > Primjer prebacivanja gumba h2 >
< vrsta unosa = 'dugme' iskaznica = 'mojBtn' vrijednost = 'ISKLJUČENO'
na klik = 'datum();' >
< skripta src = 'test.js' > skripta >
html >Gornji kod je opisan kao:
- Gumb na koji se može kliknuti i koji ima ID od “myBtn” se stvara i njegova vrijednost je postavljena na 'ISKLJUČENO' .
- Pritiskom na tipku, datum() metoda će se pokrenuti.
- Na kraju, “test.js” je priključen na izvorni put unutar
označiti.
JavaScript kod
funkcijatgl ( )
{
gdje = dokument. getElementById ( 'mojBtn' ) ;
ako ( t. vrijednost == 'NA' ) {
t. vrijednost = 'ISKLJUČENO' ; }
elseif ( t. vrijednost == 'ISKLJUČENO' ) {
t. vrijednost = 'NA' ; }
}U ovom kodu:
- A datum() koristi se za prebacivanje gumba u JavaScriptu.
- U ovoj metodi izdvajate HTML element korištenjem getElementById svojstvo, a zatim mu se dodaje naredba if else-if.
- Ako je “vrijednost==UKLJUČENO” , prebacite vrijednost na 'ISKLJUČENO'. Ako je vrijednost ISKLJUČENO, tada će vrijednost biti prebačena na ' NA' .
Izlaz
Izlaz pokazuje da je gumb prebačen s ISKLJUČENO do NA .
To je sve! Naučili ste mijenjati gumb u JavaScriptu.
Zaključak
U JavaScriptu se gumb može koristiti za prebacivanje između različitih stanja vlastitih vrijednosti ili se bilo koja funkcija može povezati s operacijom prebacivanja. The na klik() događaj gumba povezan je s funkcijom. Ovaj članak objašnjava pregled prebacivanja gumba uz dva praktična primjera. Prvi primjer izdvaja tekst pomoću unutarnjiHTML svojstvo i mijenja ga pomoću gumba za prebacivanje. U drugom primjeru, vrijednost samog gumba mijenja se pomoću prilagođene funkcije.