Bij het maken van pagina's is het soms nodig dat wanneer u op de knop op de pagina klikt, een door de auteur geprogrammeerde gebeurtenis in de browser plaatsvindt. Om dit te doen, moet u JavaScript-code in het gegenereerde document plaatsen en het aan de vereiste knop binden. Afhankelijk van de hoeveelheid code die nodig is om de beoogde gebeurtenis te implementeren, kun je verschillende manieren gebruiken om de knop aan de code te koppelen.
instructies:
Stap 1
Meestal zijn JavaScript-code-aanroepen gebonden aan de onclick-gebeurtenis, dat wil zeggen aan de klik met de linkermuisknop. Als je niet veel code nodig hebt om de actie te beschrijven die moet gebeuren, dan kan alles direct in de button-tag worden geplaatst. Als u bijvoorbeeld de browser wilt programmeren om een eenvoudig bericht weer te geven wanneer op een knop wordt geklikt, ziet het JavaScript-script er als volgt uit: alert ('Code werkte!') Er is slechts één instructie en tekst nodig. Dit alles kan eenvoudig in de onclick-gebeurtenisbeschrijving van de button-tag worden geplaatst. In dit geval kan de eenvoudigste HTML-code van de pagina er als volgt uitzien:
Knop met code
Knop met code
Stap 2
Het is niet praktisch om complexere JavaScript-code direct in de button-tag te plaatsen. Het is gemakkelijker om er een aparte functie van te maken en de aanroep in de onclick-gebeurtenis te plaatsen. Dit kan er bijvoorbeeld uitzien als een functie die een venster toont met de tijd van een klik op de knop: function getTime () {
var nu = nieuwe datum ();
alert ("De code werkte in" + now.getHours () + ":" + now.getMinutes ());
} Het moet in de kop van de pagina worden geplaatst (tussen de en tags). De volledige code van de pagina met een aanroep van deze functie gebonden aan de knop kan er als volgt uitzien:
Functie oproepknop
functie getTime () {
var nu = nieuwe datum ();
alert ("De code werkte in" + now.getHours () + ":" + now.getMinutes ());
}
Functie oproepknop
Stap 3
Dezelfde methode moet worden gebruikt wanneer het klikken op verschillende knoppen een gebeurtenis zou moeten veroorzaken die kan worden beschreven met dezelfde JavaScript-code. U kunt bijvoorbeeld de vorige functie enigszins wijzigen om de identificatie van de ingedrukte knop toe te voegen aan het berichtvenster: function getTime (btnString) {
var nu = nieuwe datum ();
alert (btnString + "ingeklikt" + now.getHours () + ":" + now.getMinutes ());
} De volledige code voor een pagina met drie van dergelijke knoppen kan er als volgt uitzien:
Drie knoppen met een functie-aanroep
functie getTime (btnString) {
var nu = nieuwe datum ();
alert (btnString + "ingeklikt" + now.getHours () + ":" + now.getMinutes ());
}
Eerste knop
Tweede knop
Derde knop
