Ovaj vodič će definirati postupak postavljanja onClick s JavaScriptom.
Kako postaviti onClick s JavaScriptom
Za postavljanje na klik s JavaScriptom postoje dvije različite metode, a to su:
- Prva metoda je dodjeljivanje vrijednosti HTML elementima na klik atribut pomoću JavaScripta.
- Druga metoda je eksplicitno dodavanje slušatelja događaja na HTML događaj koji provjerava ' klik ” događaj.
Primjer 1: Dodijelite vrijednost onclick atributu HTML elementa pomoću JavaScripta
U HTML datoteci stvorite naslov i gumb ' Klikni me ' s ID-om ' js ” koja će pokrenuti JavaScript funkciju dok kliknete na nju.
< h2 > set svojstvo onClick s JavaScriptom h2 >
< id gumba = 'js' > Klikni me dugme >
U sljedećem koraku pristupit će se kreiranom gumbu i pojavit će se ' na klik ” bit će mu pridružen atribut. Nakon klika na gumb, navedena funkcija će se izvršiti i ' style.backgroundColor ” promijenit će boju gumba na sljedeći način:
dokument. getElementById ( 'js' ) . na klik = funkcija jsFunc ( ) {
dokument. getElementById ( 'js' ) . stil . boja pozadine = 'ljubičasta' ;
}
Odgovarajući izlaz će biti:
Primjer 2: Eksplicitno dodavanje slušatelja događaja na HTML događaj
Napravi gumb ' Kliknite ovdje! ” i dodjeljuje ID “ događaj ” na njega koji će pokrenuti metodu addEventListener() na 'klik' događaj:
< id gumba = 'događaj' > Kliknite ovdje ! snažna > dugme snažna >>
Dohvatite gumb pomoću njega iskaznica a zatim priložite ' addEventListener() ' metoda prosljeđivanjem ' klik 'događaj i funkcija' eventFunc ” gdje će se promijeniti boja pozadine gumba:
dokument. getElementById ( 'događaj' ) . addEventListener ( 'klik' , eventFunc ) ;funkcija eventFunc ( ) {
dokument. getElementById ( 'događaj' ) . stil . boja pozadine = 'zeleno' ;
}
Izlaz
Primjer 3: Korištenje svih onClick metoda odjednom
U ovom primjeru, rad svih metoda bit će prikazan odjednom. Prvi je zadani način dodavanja atributa onclick unutar same HTML oznake. Nakon toga su također demonstrirane dvije metode postavljanja onclick atributa uz pomoć JavaScripta.
U sljedećem primjeru izradite tri gumba i pogledajte funkcionalnost atributa onclick.
- Prvi gumb ' Klik ” nazvat će “ htmlFunc() ” na događaj klika.
- Gumb ' Klikni me ' pristupit će se s dodijeljenim ID-om ' js ”, a zatim dodijelite vrijednost onclick atributu gumba pomoću JavaScripta.
- Gumb ' Kliknite ovdje! ” pristupit će se pomoću ID-a “ događaj ', a zatim priložite ' addEventListener() ” metoda s njim:
< id gumba = 'js' > Klikni me dugme >< br >< br >
< id gumba = 'događaj' > Kliknite ovdje ! dugme >
Donja funkcija će pokrenuti ' na klik ” događaj gumba ” Klik ”:
funkcija htmlFunc ( ) {uzbuna ( 'Gumb kliknut HTML onClick događajem' ) ;
}
Klikom na ' Kliknite Ja ” aktivirat će se sljedeća funkcija gdje će se prikazati poruka upozorenja.
dokument. getElementById ( 'js' ) . na klik = funkcija jsFunc ( ) {uzbuna ( 'Gumb kliknuo JavaScript onClick funkcijom' ) ;
}
Navedena funkcija će pokrenuti gumb ' Kliknite ovdje! ”:
dokument. getElementById ( 'događaj' ) . addEventListener ( 'klik' , eventFunc ) ;funkcija eventFunc ( ) {
uzbuna ( 'Gumb kliknuo JavaScript onClick s metodom EventListener' ) ;
}
Izlaz će prikazati poruke upozorenja na svaki klik na gumb:
Zaključak
Da biste postavili onclick s JavaScriptom, postoje dva različita pristupa, prvi je dodjeljivanje vrijednosti onclick atributu HTML elementa pomoću JavaScripta, a drugi pristup je eksplicitno dodavanje slušatelja događaja na HTML događaj koji provjerava ' klik ” događaj. Ovaj vodič definirao je metode za postavljanje onClick s JavaScriptom zajedno s primjerima.