Denna handledning kommer att definiera proceduren för hur du ställer in onClick med JavaScript.
Hur man ställer in onClick med JavaScript
För att ställa in onclick med JavaScript finns det två olika metoder, som är:
- Den första metoden är att tilldela ett värde till HTML-elementets onclick attribut med hjälp av JavaScript.
- Den andra metoden är att uttryckligen lägga till en händelseavlyssnare på HTML-händelsen som kontrollerar efter ' klick ' händelse.
Exempel 1: Tilldela ett värde till HTML-elementets onclick-attribut med hjälp av JavaScript
Skapa en rubrik och en knapp i HTML-filen ' Klicka här ' med id ' js ” som kommer att utlösa JavaScript-funktionen när du klickar på den.
< h2 > Uppsättning onClick-egendom med JavaScript h2 >
< knapp-id = 'js' > Klicka här knapp >
I följande steg kommer den skapade knappen att nås och en ' onclick ”-attributet kommer att kopplas till den. När du klickar på knappen kommer den angivna funktionen att utföras och ' style.backgroundColor ” egenskapen ändrar knappfärgen enligt följande:
dokumentera. getElementById ( 'js' ) . onclick = funktion jsFunc ( ) {
dokumentera. getElementById ( 'js' ) . stil . bakgrundsfärg = 'Lila' ;
}
Motsvarande utgång kommer att vara:
Exempel 2: Lägg explicit till en händelseavlyssnare på HTML-händelsen
Skapa en knapp ' Klicka här! ' och tilldelar ett id ' händelse ” till det som kommer att utlösa metoden addEventListener() på 'klick' händelse:
< knapp-id = 'händelse' > Klicka här ! stark > knapp stark >>
Hämta knappen med hjälp av dess id och bifoga sedan en ' addEventListener() '-metoden genom att skicka en ' klick ' händelse och en funktion ' eventFunc ” där knappens bakgrundsfärg kommer att ändras:
dokumentera. getElementById ( 'händelse' ) . addEventListener ( 'klick' , eventFunc ) ;funktion händelseFunc ( ) {
dokumentera. getElementById ( 'händelse' ) . stil . bakgrundsfärg = 'Grön' ;
}
Produktion
Exempel 3: Använda alla onClick-metoder på en gång
I det här exemplet kommer alla metoders funktion att visas på en gång. Det första är standardsättet att lägga till onclick-attributet i själva HTML-taggen. Därefter har de två metoderna att ställa in onclick-attributet med hjälp av JavaScript också demonstrerats.
I följande exempel, skapa tre knappar och se funktionen för onclick-attributet.
- Den första knappen ' Klick ' kommer att ringa ' htmlFunc() ” på klickhändelsen.
- Knappen ' Klicka här ' kommer att nås med dess tilldelade id ' js ” och tilldela sedan ett värde till knappens onclick-attribut med hjälp av JavaScript.
- Knappen ' Klicka här! ' kommer att nås med id ' händelse ' och bifoga sedan en ' addEventListener() ” metod med det:
< knapp-id = 'js' > Klicka här knapp >< br >< br >
< knapp-id = 'händelse' > Klicka här ! knapp >
Funktionen nedan kommer att utlösa ' onclick ' händelse av knappen ' Klick ”:
funktion htmlFunc ( ) {varna ( 'Knappen som klickas av HTML onClick-händelse' ) ;
}
När du klickar på ' Klicka här ”-knappen utlöses följande funktion där ett varningsmeddelande kommer att visas.
dokumentera. getElementById ( 'js' ) . onclick = funktion jsFunc ( ) {varna ( 'Knappen som klickas av JavaScript onClick-funktionen' ) ;
}
Den givna funktionen kommer att utlösa knappen ' Klicka här! ”:
dokumentera. getElementById ( 'händelse' ) . addEventListener ( 'klick' , eventFunc ) ;funktion händelseFunc ( ) {
varna ( 'Knappen som JavaScript klickade på vid Klicka med EventListener-metoden' ) ;
}
Utgången kommer att visa varningsmeddelanden vid varje knappklick:
Slutsats
För att ställa in onclick med JavaScript finns det två olika tillvägagångssätt, den första är att tilldela ett värde till HTML-elementets onclick-attribut med JavaScript och den andra metoden är att uttryckligen lägga till en händelseavlyssnare på HTML-händelsen som kontrollerar efter ' klick ' händelse. Denna handledning har definierat metoderna för att ställa in onClick med JavaScript tillsammans med exempel.