A l’hora de crear pàgines, de vegades és necessari que quan feu clic al botó situat a la pàgina, es produeixi algun esdeveniment programat per l’autor al navegador. Per fer-ho, heu de col·locar el codi JavaScript al document generat i vincular-lo al botó requerit. Depenent de la quantitat de codi que es requereixi per implementar l'esdeveniment previst, podeu utilitzar diferents maneres de connectar el botó al codi.
Instruccions
Pas 1
Molt sovint, les trucades de codi JavaScript estan vinculades a l’esdeveniment onclick, és a dir, al clic al botó esquerre del ratolí. Si no necessiteu molt de codi per descriure l'acció que ha de passar, tot es pot col·locar directament a l'etiqueta de botó. Per exemple, per programar el navegador perquè mostri un missatge senzill quan es fa clic a un botó, l'script JavaScript tindrà aquest aspecte: alerta ("El codi ha funcionat!") Només cal una frase i un text. Tot això es pot col·locar fàcilment a la descripció de l’esdeveniment onclick de l’etiqueta de botó. En aquest cas, el codi HTML més senzill de la pàgina pot tenir aquest aspecte:
Botó amb codi
Botó amb codi
Pas 2
No és pràctic col·locar codi JavaScript més complex directament a l’etiqueta de botó. És més fàcil fer-ne una funció independent i fer la trucada a l’esdeveniment onclick. Per exemple, pot semblar una funció que mostra una finestra que conté l'hora d'un clic de botó: function getTime () {
var ara = nova data ();
alert ("El codi ha funcionat a" + now.getHours () + ":" + now.getMinutes ());
} S'ha de col·locar a la capçalera de la pàgina (entre les etiquetes i). El codi complet de la pàgina amb una trucada a aquesta funció lligada al botó pot tenir aquest aspecte:
Botó de trucada de funció
funció getTime () {
var ara = nova data ();
alert ("El codi ha funcionat a" + now.getHours () + ":" + now.getMinutes ());
}
Botó de trucada de funció
Pas 3
S’ha d’utilitzar el mateix mètode quan es fa clic en diversos botons diferents per crear un esdeveniment que es pot descriure amb el mateix codi JavaScript. Per exemple, podeu modificar lleugerament la funció anterior per afegir la identificació del botó premut al quadre de missatges: funció getTime (btnString) {
var ara = nova data ();
alert (btnString + "cliced in" + now.getHours () + ":" + now.getMinutes ());
} El codi complet d'una pàgina amb tres botons d'aquest tipus pot ser així:
Tres botons amb una trucada de funció
funció getTime (btnString) {
var ara = nova data ();
alert (btnString + "cliced in" + now.getHours () + ":" + now.getMinutes ());
}
Primer botó
Segon botó
Tercer botó
