Ang tutorial na ito ay tutukuyin ang pamamaraan kung paano itakda ang onClick gamit ang JavaScript.
Paano Itakda ang onClick Gamit ang JavaScript
Upang itakda ang onclick sa JavaScript, mayroong dalawang magkaibang pamamaraan, na:
- Ang unang paraan ay ang magtalaga ng halaga sa elemento ng HTML onclick attribute gamit ang JavaScript.
- Ang pangalawang paraan ay ang tahasang magdagdag ng isang tagapakinig ng kaganapan sa HTML na kaganapan na sumusuri para sa ' i-click ” kaganapan.
Halimbawa 1: Magtalaga ng Value sa onclick na Attribute ng HTML Element Gamit ang JavaScript
Sa HTML file, lumikha ng isang heading at isang button na “ Pindutin mo ako 'may id' js ” na magti-trigger sa JavaScript function habang nagki-click dito.
< h2 > Itakda onClick property With JavaScript h2 >
< button id = 'js' > Pindutin mo ako pindutan >
Sa susunod na hakbang, maa-access ang ginawang button at isang ' onclick ” attribute ay kalakip dito. Sa pag-click sa pindutan, ang tinukoy na function ay isasagawa at ang ' istilo.kulay ng background ' babaguhin ng property ang kulay ng button gaya ng sumusunod:
dokumento. getElementById ( 'js' ) . onclick = function na jsFunc ( ) {
dokumento. getElementById ( 'js' ) . istilo . kulay ng background = 'Lila' ;
}
Ang kaukulang output ay:
Halimbawa 2: Tahasang Magdagdag ng Event Listener sa HTML Event
Lumikha ng isang pindutan ' Pindutin dito! 'at nagtalaga ng id' kaganapan ” dito na magti-trigger ng addEventListener() na paraan sa “click” kaganapan:
< button id = 'kaganapan' > Pindutin dito ! malakas > pindutan malakas >>
Kunin ang button gamit nito id at pagkatapos ay maglakip ng ' addEventListener() 'paraan sa pamamagitan ng pagpasa ng ' i-click 'kaganapan at isang function' eventFunc ” kung saan babaguhin ang kulay ng background ng button:
dokumento. getElementById ( 'kaganapan' ) . addEventListener ( 'click' , eventFunc ) ;function na kaganapanFunc ( ) {
dokumento. getElementById ( 'kaganapan' ) . istilo . kulay ng background = 'berde' ;
}
Output
Halimbawa 3: Gamit ang Lahat ng onClick Methods nang sabay-sabay
Sa halimbawang ito, ang paggana ng lahat ng mga pamamaraan ay ipapakita nang sabay-sabay. Una ay ang default na paraan ng pagdaragdag ng onclick attribute sa loob ng HTML tag mismo. Pagkatapos noon, ipinakita na rin ang dalawang paraan ng pagtatakda ng onclick attribute sa tulong ng JavaScript.
Sa sumusunod na halimbawa, gumawa ng tatlong button at tingnan ang functionality ng onclick attribute.
- Ang unang pindutan ' I-click ' tatawag sa ' htmlFunc() ” sa kaganapan ng pag-click.
- Ang pindutan ' Pindutin mo ako ' ay maa-access gamit ang nakatalagang id nito ' js ” at pagkatapos ay magtalaga ng value sa onclick attribute ng button gamit ang JavaScript.
- Ang pindutan ' Pindutin dito! ' ay maa-access gamit ang id ' kaganapan 'at pagkatapos ay maglakip ng ' addEventListener() 'paraan kasama nito:
< button id = 'js' > Pindutin mo ako pindutan >< br >< br >
< button id = 'kaganapan' > Pindutin dito ! pindutan >
Ang function sa ibaba ay magti-trigger ng ' onclick 'kaganapan ng button' I-click ”:
function htmlFunc ( ) {alerto ( 'Ang button na na-click ng HTML onClick na kaganapan' ) ;
}
Sa pag-click sa ' Pindutin mo ako ” button, ang sumusunod na function ay magti-trigger kung saan may ipapakitang mensahe ng babala.
dokumento. getElementById ( 'js' ) . onclick = function na jsFunc ( ) {alerto ( 'Ang button na na-click ng JavaScript onClick function' ) ;
}
Ang ibinigay na function ay magti-trigger ng button na “ Pindutin dito! ”:
dokumento. getElementById ( 'kaganapan' ) . addEventListener ( 'click' , eventFunc ) ;function na kaganapanFunc ( ) {
alerto ( 'Ang button na na-click ng JavaScript onClick gamit ang EventListener Method' ) ;
}
Ang output ay magpapakita ng mga alertong mensahe sa bawat pag-click sa button:
Konklusyon
Para itakda ang onclick gamit ang JavaScript, mayroong dalawang magkaibang approach, ang una ay ang magtalaga ng value sa onclick attribute ng HTML element gamit ang JavaScript at ang pangalawang diskarte ay ang tahasang magdagdag ng event listener sa HTML event na tumitingin sa ' i-click ” kaganapan. Tinukoy ng tutorial na ito ang mga paraan upang itakda ang onClick gamit ang JavaScript kasama ang mga halimbawa.