Pubblicato il

html

javascript

come eseguire funzione codice javascript quando si fa click su un tasto bottone pulsante HTML

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:

<!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>
Se andiamo ad aprire questa pagina vedremo in output una cosa del genere:



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:

<!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>
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.



Ci siamo! Abbiamo visto come eseguire un codice di una funzione Javascript quando viene cliccato un tasto HTML.

Se hai una domanda puoi chiedere qualsiasi cosa nei commenti in basso

Grazie per aver letto questa guida su Devnews.it

Spero ti sia stata utile in qualche modo. Ti prego di supportare questa pagina mettendo mi piace alle nostre pagine social cliccando un basso, dove pubblichiamo regolermente notizie, tutorial e fatti curiosi sull'informatica. Grazie e ci vediamo alla prossima :)

Devnews

Devnews