Ciao a tutti e benvenuti in questa piccola guida HTML e Javascript dove vi mostrerò un metodo facilissimo per eseguire una funzione Javascript quando viene cliccato un pulsante.
Come creare un bottone in HTML
Prima di andare a vedere come eseguire una funzione sul click di un tasto, andiamo prima a vedere come creare il tasto stesso.
Un bottone nel codice HTML è rappresentato dal tag <button></button> Per una descrizione dettagliata del tag <button> potete consultare w3schools. andiamo quindi ad inserire un tag <button></button> in una pagina HTML:
Se andiamo ad aprire questa pagina vedremo in output una cosa del genere:<!DOCTYPE html> <html> <head>
<title>Esempio come eseguire funzione quando si fa click su un bottone</title>
<style>
...
</style> </head> <body>
<button>Cliccami</button></body>
Come vedete se provate a cliccare sul tasto in alto, non succede nulla. Questo è perché non abbiamo ancora specificato cosa deve accadere quando il tasto viene premuto. Vediamo come aggiungere delle funzionalità al nostro bottone!
Come far partire un codice javascript premendo su un bottone
Se consultate la pagine del tag <button></button> su w3schools vedrete che una delle proprietà del tag <button> è proprio: onclick. Come valore per questa proprietà possiamo passare del codice Javascript che verra eseguito quando il tasto viene premuto. Vediamo in basso un esempio:
<!DOCTYPE html> <html> <head>
<title>Esempio come eseguire funzione quando si fa click su un bottone</title>
<style>
...
</style> </head> <body>
<button onclick="console.log('Ciao')">Cliccami</button></body>
Come vedete abbiamo aggiunto la proprietà onclick al tasto, ed abbiamo inserito l'istruzione console.log('Ciao') come valore. Quando il bottone verrà premuto quindi vedremo in output nella console Javascript la parola Ciao!.
Come eseguire una funzione Javascript quando si fa click su un tasto
Come potete immaginare, se volgiamo eseguire un codice più complicato di un semplice log, sarebbe veramente un orrore inserire tutto il codice all'interno del valore onclick. Fortunatamente possiamo definire il codice che volgiamo eseguire in una funzione Javascript e poi possiamo chiamare questa funzione quando il pulsante viene premuto. Vediamo in basso come:
Come vedete, abbiamo creato una funzione in uno <script> tag. Poi chiamiamo la funzione da eseguire nella proprietà onclick del bottone. Potete vedere in basso che quando il bottone viene cliccato questo cambierà colore.<!DOCTYPE html> <html> <head>
<title>Esempio come eseguire funzione quando si fa click su un bottone</title>
<style>
...
</style> </head> <body>
<button onclick="funzioneDaEseguire()">Cliccami</button></body> <script>
function funzioneDaEseguire(){ var bottone = document.getElementById('testButton') bottone.style.backgroundColor = '#000'; bottone.style.color= #2ecc71; }</script>
Ci siamo! Abbiamo visto come eseguire un codice di una funzione Javascript quando viene cliccato un tasto HTML.