Knoppen in webpagina's worden gebruikt om een interactieve gebruikerservaring te bieden. Als de reactie op een klik op een knop niet vereist dat gegevens naar de server worden verzonden, wordt de interactie in de regel geïmplementeerd met behulp van JavaScript-scripts. De methoden voor het aanroepen van de corresponderende JavaScript-code kunnen verschillen - hieronder zijn verschillende mogelijke opties voor knoppen van verschillende typen.
instructies:
Stap 1
Als de weergave van een knop op een webpagina is georganiseerd met behulp van de button-tag, dan kan de JavaScript-code in het onclick-attribuut worden geplaatst. Bijvoorbeeld als volgt: button Het is natuurlijk niet aan te raden om code die groot genoeg is direct in de button-tag te plaatsen - het is beter om het als een functie te ontwerpen en alleen de code voor het aanroepen van deze functie in het onclick-attribuut te plaatsen. Bijvoorbeeld:
functie showAlert () {
waarschuwing ('Knop geklikt!')
}
knop
Stap 2
Als de knop wordt weergegeven via een van de invoertagvariaties (verzenden, resetten, knop of afbeelding), dan kan hetzelfde onclick-attribuut worden gebruikt. Voor een knop om formuliervelden te wissen (reset), kan de code er bijvoorbeeld als volgt uitzien: Als u wilt dat alleen JavaScript wordt uitgevoerd wanneer op de knop wordt geklikt en de standaardactie niet plaatsvindt, voegt u de return-opdracht toe aan de functie of rechtstreeks naar het onclick-attribuut false. Bijvoorbeeld:
Stap 3
Als u een reactie wilt organiseren op het klikken op een knop van het type verzenden, dan kunt u, naast de bovenstaande methode met behulp van het attribuut onclick, de eigenschappen gebruiken van de formuliertag waartoe deze knop behoort. De bijbehorende functieaanroep kan in het attribuut onsubmit van de formuliertag worden geplaatst. Bijvoorbeeld:
Stap 4
Als de knop geen formulierelement is, maar alleen een grafisch element (img-tag), dan staan de standaarden daarvoor ook het gebruik van het attribuut onclick toe. Bijvoorbeeld:
Stap 5
Als de knop een hyperlink is, dan moet je niet de attributen van de knop zelf gebruiken; het is beter om de eigenschappen van de link-tag te gebruiken. U kunt, net als bij de vorige opties, de onclick-tag gebruiken. Bijvoorbeeld: En u kunt het adres in het href-attribuut vervangen door een functieaanroep. Bijvoorbeeld als volgt:
