Articolo originale: https://www.freecodecamp.org/news/html-button-onclick-javascript-click-event-tutorial/
Ogni volta che visiti un sito Web, probabilmente farai clic su qualcosa come un collegamento o un pulsante.
I collegamenti possono portare a una determinata parte della pagina, a un'altra pagina del sito Web o a un altro sito Web. I pulsanti, d'altra parte, sono generalmente manipolati da eventi JavaScript in modo che possano attivare determinate funzionalità.
In questo tutorial, esploreremo i due diversi modi di eseguire eventi clic in JavaScript utilizzando due metodi diversi.
Per prima cosa, esamineremo il tradizionale evento onclick che esegui direttamente dalla pagina HTML. Quindi vedremo come funziona il più moderno "click" di eventListner, che ti consente di separare l'HTML dal JavaScript.
Come utilizzare l'evento onclick in JavaScript
L'evento onclick esegue una determinata funzionalità quando si fa clic su un pulsante. Questo potrebbe accadere quando un utente invia un modulo, quando modifichi determinati contenuti sulla pagina Web e altre cose del genere.
Inserisci la funzione JavaScript che desideri eseguire all'interno del tag di apertura del pulsante.
Sintassi di base di onclick
<element onclick="functionToExecute()">Click</element>
Per esempio
<button onclick="functionToExecute()">Click</button>
Si noti che l'attributo onclick è fondamentalmente JavaScript. Il valore che prende, che è la funzione che vuoi eseguire, dice tutto, poiché viene invocato direttamente all'interno del tag di apertura.
In JavaScript, invochi una funzione chiamandone il nome, quindi metti una parentesi dopo l'identificatore della funzione (il nome).
Esempio di evento onclick
Ho preparato del codice HTML di base con un po' di stile in modo da poter mettere in pratica l'evento onclick nel mondo reale.
<div>
<p class="name">freeCodeCamp</p>
<button>Cambia in blu</button>
</div>
Ed ecco il CSS per farlo sembrare carino, insieme a tutto il resto del codice di esempio:
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
p {
font-size: 2rem;
}
button {
padding: 7px;
border: none;
border-radius: 4px;
cursor: pointer;
}
button.blue {
background-color: #3498db;
}
button.green {
background-color: #2ecc71;
}
button.orange {
background-color: orangered;
}
Quindi, sulla pagina web, questo è quello che abbiamo:
Il nostro obiettivo è cambiare il colore del testo in blu quando facciamo clic sul pulsante. Quindi dobbiamo aggiungere un attributo onclick al nostro pulsante, poi scrivere la funzione in JavaScript per cambiare il colore.
Quindi dobbiamo apportare una leggera modifica al nostro HTML:
<div>
<p class="name">freeCodeCamp</p>
<button onclick="changeColor()">Cambia in blu</button>
</div>
La funzione che vogliamo eseguire è changeColor(). Quindi dobbiamo scriverlo in un file JavaScript o nel file HTML all'interno di un tag <script>.
Se vuoi scrivere il tuo script in un file JavaScript, devi collegarlo nell'HTML usando la sintassi seguente:
<script src="path-to-javascript-file"></script>
Se vuoi scrivere lo script in un file HTML, mettilo semplicemente all'interno del tag script:
<script>
// Il tuo Script
</script>
Ora scriviamo la nostra funzione changeColor().
Prima di tutto, dobbiamo selezionare l'elemento che vogliamo manipolare, che è il testo freeCodeCamp all'interno del tag <p>.
In JavaScript, lo fai con i metodi DOM getElementById(), getElementsByClassName() o querySelector(). Quindi memorizzi il valore in una variabile.
In questo tutorial userò querySelector() perché è più moderno ed è più veloce. Userò anche const per dichiarare le nostre variabili invece di let e var, perché con const le cose sono più sicure poiché la variabile diventa di sola lettura.
const name = document.querySelector(".name");
Ora che abbiamo selezionato il testo, scriviamo la nostra funzione. In JavaScript, la sintassi della funzione di base è simile alla seguente:
function functionName () {
// Cosa fare
}
Quindi scriviamo la nostra funzione:
function changeColor() {
name.style.color = "blue";
}
Cosa sta succedendo?
Ricorda dall'HTML che changeColor()è la funzione che eseguiremo. Ecco perché il nostro identificatore di funzione (nome) è impostato su changeColor. Se il nome non è correlato a ciò che è nell'HTML, non funzionerà.
Nel DOM (Document Object Model, si riferisce a tutto l'HTML), per cambiare tutto ciò che riguarda lo stile, devi scrivere "style" poi un punto (.). Questo è seguito da ciò che vuoi modificare, che potrebbe essere il colore, il colore di sfondo, la dimensione del carattere e così via.
Quindi, all'interno della nostra funzione, prendiamo la variabile name che abbiamo dichiarato per ottenere il nostro testo freeCodeCamp, quindi cambiamo il colore in blu.
Il colore del nostro testo diventa blu ogni volta che si fa clic sul pulsante:
Il nostro codice funziona!
Potremmo complicare un po' le cose facendo in modo di cambiare il nostro testo in più colori:
<div>
<p class="name">freeCodeCamp</p>
<button onclick="changeColor('blue')" class="blue">Blue</button>
<button onclick="changeColor('green')" class="green">Green</button>
<button onclick="changeColor('orangered')" class="orange">Orange</button>
</div>
Quindi, quello che vogliamo fare è cambiare il testo in blu, verde e rosso-arancione.
Questa volta, le funzioni onclick nel nostro HTML prendono i valori del colore in cui vogliamo cambiare il testo. Questi sono chiamati parametri in JavaScript. Anche la funzione che scriveremo ha il sua parametro, che chiameremo “color”.
La nostra pagina web è leggermente cambiata:
Quindi, selezioniamo il nostro testo freeCodeCamp e scriviamo la funzione per cambiarne il colore in blu, verde e rosso-arancione:
const name = document.querySelector(".name");
function changeColor(color) {
name.style.color = color;
}
Il blocco di codice nella funzione prende la variabile name (dove abbiamo memorizzato il nostro testo freeCodeCamp), quindi imposta il colore su qualunque cosa abbiamo passato nelle funzioni changeColor() presenti nei pulsanti HTML.
Come utilizzare l'eventListener di click in JavaScript
In JavaScript, ci sono diversi modi per fare la stessa cosa. Poiché lo stesso JavaScript si è evoluto nel tempo, abbiamo iniziato ad aver bisogno di separare il codice HTML, CSS e JavaScript per rispettare le migliori pratiche.
I listener di eventi lo rendono possibile poiché ti consentono di separare JavaScript dall'HTML. Puoi anche farlo con onclick, ma adesso usiamo un altro approccio.
Sintassi di base di eventListener
element.addEventListener("type-of-event", functionToExecute)
Ora cambiamo il testo di freeCodeCamp in blu usando l'eventListener di click
Questo è il nostro nuovo HTML:
<div>
<p class="name">freeCodeCamp</p>
<button>Cambia colore</button>
</div>
Ed ecco come appare:
Questa volta nel nostro script, dobbiamo selezionare anche il pulsante (non solo il testo di freeCodeCamp). Questo perché non c'è nulla di JavaScript nel tag di apertura del nostro pulsante, il che è fantastico.
Quindi, il nostro script è simile a questo:
const name = document.querySelector(".name");
const btn = document.querySelector("button");
btn.addEventListener("click", function () {
name.style.color = "blue";
});
Possiamo anche separare totalmente la nostra funzione dal eventListener e la nostra funzionalità rimarrà la stessa:
btn.addEventListener("click", changeColor);
function changeColor() {
name.style.color = "blue";
}
Come creare un pulsante "Mostra di più" e "Mostra meno" con JavaScrpit
Uno dei modi migliori per imparare è creare progetti, quindi prendiamo ciò che abbiamo imparato su onclick e eventListner di "click" per creare qualcosa.
Quando visiti un blog, spesso vedi prima gli estratti degli articoli. Quindi puoi fare clic su un pulsante "leggi di più" per mostrare il resto. Proviamo a farlo.
Questo è l'HTML con cui avremo a che fare:
<article id="content">
<p>
freeCodeCamp is one of the best platforms to learn how to code.
freeCodeCamp has a detailed curriculum that will take you from zero to
hero in web development, software engineering, machine learning, and
more.
</p>
<p>
freeCodeCamp also has a YouTube channel containing over 1000 videos on
web development, software engineering, machine learning, data science,
freelance web development, database administration, and pretty much
anything related to tech. To get updates when videos are uploaded, you
need to subscribe to the channel and turn on notifications. You can also
follow freeCodeCamp on Twitter, where links to well written articles and
videos are tweeted daily.
</p>
<p>
Since no one has to pay to learn how to code on freeCodeCamp,
freeCodeCamp runs on voluntary donations from donors all around the
world in order to pay employees and maintain servers. If you are
generous enough consider joining the donors.
</p>
</article>
<button onclick="showMore()">Mostra di più</button>
È un semplice HTML con alcune note riguardanti freeCodeCamp. E c'è un pulsante a cui attacchiamo già onclick. La funzione che vogliamo eseguire è showMore(), che scriveremo a breve.
Senza CSS, questo è quello che abbiamo:
Non è molto brutto, ma possiamo dargli un aspetto migliore e l'aspetto che vogliamo. Quindi inseriamo un po' CSS che spiegherò di seguito:
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #f1f1f1;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
article {
width: 400px;
background: #fff;
padding: 20px 20px 0;
font-size: 18px;
max-height: 270px;
overflow: hidden;
transition: max-height 1s;
text-align: justify;
margin-top: 20px;
}
p {
margin-bottom: 16px;
}
article.open {
max-height: 1000px;
}
button {
background: #0e0b22;
color: #fff;
padding: 0.6rem;
margin-top: 20px;
border: none;
border-radius: 4px;
}
button:hover {
cursor: pointer;
background: #1e1d25;
}
</style>
Cosa sta facendo il CSS?
Con il selettore universale (*), stiamo rimuovendo il margine e il padding predefinito degli elementi in modo da poter aggiungere il nostro margine e padding.
Abbiamo anche il dimensionamento del box impostato su border-box in modo da poter includere il padding e il bordo nella larghezza e nell'altezza totale dei nostri elementi.
Abbiamo centrato tutto nel corpo con Flexbox e gli abbiamo dato uno sfondo grigio chiaro.
Il nostro elemento <article>, che contiene il testo, ha una larghezza di 400px, uno sfondo bianco (#fff ) e ha un padding di 20px in alto, 20 a sinistra e a destra e 0 in basso.
I tag di paragrafo al suo interno hanno una dimensione del carattere di 18px, quindi abbiamo assegnato loro un'altezza massima di 270px. A causa dell'altezza massima dell'elemento article, tutto il testo non sarà contenuto e traboccherà. Per risolvere questo problema, abbiamo impostato l'overflow su nascosto per non mostrare questo testo all'inizio.
La proprietà transition assicura che ogni modifica avvenga dopo 1 secondo. Tutto il testo all'interno di article è giustificato e ha un margine superiore di 20px in modo che non rimanga troppo attaccato alla parte superiore della pagina.
Poiché abbiamo rimosso il margine predefinito, i nostri paragrafi risultano uniti. Quindi impostiamo un margine inferiore di 16px per separarli l'uno dall'altro.
Il nostro selettore, article.open, ha una proprietà di max-height impostata a 1000px. Ciò significa che ogni volta che l'elemento article avrà associato a esso una classe open, l'altezza massima cambierà da 270px a 1000px per mostrare il resto dell'articolo. Questo è possibile con JavaScript, il nostro punto di svolta.
Abbiamo disegnato il nostro button con uno sfondo scuro e lo abbiamo reso bianco. Abbiamo impostato il suo bordo su none per rimuovere il bordo predefinito dell'HTML dei pulsanti e abbiamo assegnato al bordo un raggio di 4px in modo che abbia un aspetto leggermente arrotondato.
Infine, abbiamo usato la pseudo-classe di CSS hover per cambiare il cursore del pulsante in un puntatore. Il colore di sfondo cambia leggermente quando un utente passa il cursore su di esso.
Ecco fatto: questo è il CSS.
La nostra pagina ora ha un aspetto migliore:
La prossima cosa che dobbiamo fare è scrivere il nostro JavaScript in modo da poter vedere il resto dell'articolo che è nascosto.
Abbiamo un attributo onclick all'interno del nostro tag di apertura del pulsante, pronto per eseguire una funzione showMore(), quindi scriviamo la funzione.
Dobbiamo prima selezionare il nostro articolo, perché dobbiamo mostrare il resto:
const article = document.querySelector("#content");
La prossima cosa che dobbiamo fare è scrivere la funzione showMore() in modo da poter cambiare tra vedere il resto dell'articolo e nasconderlo.
function showMore() {
if (article.className == "open") {
// leggi meno
article.className = "";
button.innerHTML = "Show more";
} else {
//leggi di più
article.className = "open";
button.innerHTML = "Show less";
}
}
Che cosa fa la funzione?
Qui usiamo una dichiarazione if…else. Questa è una parte cruciale di JavaScript che ti aiuta a prendere decisioni nel codice se viene soddisfatta una determinata condizione.
La sintassi di base è simile a questa:
if (condizione == "qualcosa") {
// fai qualcosa
} else {
// fai qualcos'altro
}
Qui, se il nome della classe dell'articolo è uguale a open (ovvero, vogliamo aggiungere la classe open, che è stata impostata su un'altezza massima di 1000px nel CSS), allora vogliamo vedere il resto dell'articolo. Altrimenti, vogliamo che l'articolo torni allo stato iniziale in cui una parte di esso è nascosta.
Lo facciamo assegnandogli una classe open nel blocco else, che mostra il resto dell'articolo. Quindi impostiamo la classe su una stringa vuota (none) nel blocco if, che la fa tornare allo stato iniziale.
Il nostro codice funziona bene con una transizione graduale:
Possiamo separare HTML e JavaScript e continuare a utilizzare onclick, perché onclick è JavaScript. Quindi è possibile scriverlo in un file JavaScript invece di averlo nel file HTML.
button.onclick = function () {
if (article.className == "open") {
// leggi meno
article.className = "";
button.innerHTML = "Show more";
} else {
//leggi di più
article.className = "open";
button.innerHTML = "Show less";
}
};
Possiamo anche farlo usando un eventListner:
<article id="content">
<p>
freeCodeCamp is one of the best platforms to learn how to code.
freeCodeCamp has a detailed curriculum that will take you from zero to
hero in web development, software engineering, machine learning, and
many more.
</p>
<p>
freeCodeCamp also has a YouTube channel containing over 1000 videos on
web development, software engineering, machine learning, data science,
freelance web development, database administration, and pretty more
anything related to tech. To get updates when videos are uploaded, you
need to subscribe to the channel and turn on notifications. You can also
follow freeCodeCamp on Twitter, where links to well written articles and
videos are tweeted daily.
</p>
<p>
Since no one has to pay to learn how to code on freeCodeCamp,
freeCodeCamp runs on voluntary donations from donors all around the
world in order to pay employees and maintain servers. If you are
generous enough consider joining the donors.
</p>
</article>
<button id="read-more">Show more</button>
const article = document.querySelector("#content");
const button = document.querySelector("#read-more");
button.addEventListener("click", readMore);
function readMore() {
if (article.className == "open") {
// leggi meno
article.className = "";
button.innerHTML = "Show more";
} else {
article.className = "open";
button.innerHTML = "Show less";
}
}
La nostra funzionalità rimane la stessa!
Conclusione
Spero che questo tutorial ti aiuti a capire come funziona l'evento click in JavaScript. Qui abbiamo esplorato due diversi metodi, quindi ora puoi iniziare a usarli nei tuoi progetti di codifica.
Grazie per la lettura e continua a programmare.