Els botons de les pàgines web s’utilitzen per proporcionar experiència interactiva als usuaris. Com a regla general, si la resposta a un clic de botó no requereix l'enviament de dades al servidor, la interacció s'implementa mitjançant scripts JavaScript. Els mètodes per invocar el codi JavaScript corresponent poden variar; a continuació es mostren diverses opcions possibles per a botons de diferents tipus.
Instruccions
Pas 1
Si la visualització d'un botó en una pàgina web s'organitza mitjançant l'etiqueta de botó, el codi JavaScript es pot col·locar a l'atribut onclick. Per exemple, com aquest: botó Per descomptat, no és recomanable posar un codi prou gran directament a l’etiqueta de botó; és millor dissenyar-lo com a funció i posar només el codi per cridar aquesta funció a l’atribut onclick. Per exemple:
funció showAlert () {
alerta ("Feu clic al botó")
}
botó
Pas 2
Si el botó es mostra mitjançant una de les variacions de l’etiqueta d’entrada (enviar, restablir, botó o imatge), es pot utilitzar el mateix atribut onclick. Per exemple, perquè un botó esborri els camps del formulari (restableix), el codi podria tenir aquest aspecte: si només voleu que s’executi JavaScript quan es fa clic al botó i no es produeix l’acció per defecte, afegiu l’ordre return al o directament a l'atribut onclick false. Per exemple:
Pas 3
Si heu d’organitzar una resposta per fer clic a un botó del tipus d’enviament, a més del mètode anterior que utilitza l’atribut onclick, podeu utilitzar les propietats de l’etiqueta de formulari a la qual pertany aquest botó. La trucada de funció corresponent es pot fer a l'atribut onsubmit de l'etiqueta de formulari. Per exemple:
Pas 4
Si el botó no és un element de formulari, sinó només un element gràfic (etiqueta img), els estàndards també permeten l’ús de l’atribut onclick. Per exemple:
Pas 5
Si el botó és un hiperenllaç, no heu d’utilitzar els atributs del mateix botó; és millor utilitzar les propietats de l’etiqueta d’enllaç. Podeu, com a les opcions anteriors, utilitzar l’etiqueta onclick. Per exemple: i podeu substituir l'adreça de l'atribut href per una trucada de funció. Per exemple, així:
