Onclick Javascript

Michael Zippo 04.11.2021

L’evento JavaScript onclick esegue una funzione quando un utente fa clic su un pulsante o su un altro elemento web. Questo metodo viene utilizzato sia in linea in un documento HTML che in un documento JavaScript.

Quando si codifica in JavaScript, è comune voler eseguire il codice quando un utente interagisce con la pagina web. Ad esempio, potresti volere che accada qualcosa quando un utente preme un pulsante. Ma come si implementa questa funzionalità in JavaScript?

Ecco dove "onclick()" evento può essere utile. L’evento onclick è uno dei tipi di evento più comunemente usati. onclick ti consente di eseguire il codice quando un utente fa clic su un pulsante o su un altro elemento della tua pagina web.

In questa breve guida, analizzeremo come funziona la funzione onclick. Discuteremo di come puoi utilizzare onclick nel tuo codice per rendere interattivo un sito web.

Aggiornamento eventi

Onclick è un tipo di evento JavaScript. Gli eventi sono azioni che avvengono nel browser che possono essere avviate dall’utente o dal browser stesso. Un utente che fa clic su un pulsante, invia un modulo o preme un tasto sulla tastiera sono tutti esempi di eventi in azione. In questo tutorial, ci concentreremo sul primo: un utente che fa clic su un elemento.

Utilizzando gli eventi, gli sviluppatori possono rendere interattiva una pagina web. Puoi rendere visibile un modulo quando l’utente fa clic su un pulsante o visualizzare un messaggio a un utente quando invia un modulo.

Ci sono due componenti principali degli eventi: gestori di eventi e ascoltatori di eventi.

Quando fai clic su un pulsante, premi un tasto o passi con il mouse su un elemento, viene eseguito un evento. Il gestore dell’evento è il codice che viene eseguito all’avvio dell’evento. Ad esempio, quando fai clic su un pulsante, verrà eseguito il gestore eventi.

L’ascoltatore di eventi fa parte di un elemento&md cenere;come un pulsante‚Äîche "ascolta" e aspetta finché non interagisci con esso. Quindi, il listener esegue il gestore dell’evento.

JavaScript onclick

L’evento JavaScript onclick esegue una funzione quando fai clic su un pulsante o un altro elemento web. Ad esempio, un evento onclick può far apparire una finestra di dialogo quando si timbra un pulsante.

Ecco la sintassi per il metodo onclick in HTML:

Quando si fa clic su questo pulsante HTML, il "codetorun" La funzione JavaScript verrà eseguita. Possiamo usare onclick con altri elementi, come un div. onclick non è esclusivo dei pulsanti.

Puoi anche utilizzare onclick in semplice JavaScript. Ecco un esempio di metodo JavaScript onclick:

Utilizziamo il metodo JavaScript getElementById per recuperare un elemento dalla nostra pagina web. Quando clicchiamo sull’elemento con l’ID "pulsante" la nostra funzione onclick verrà eseguita.

Esempio JavaScript di pulsante onclick

Supponiamo che tu voglia modificare del testo su una pagina web dopo aver fatto clic su un elemento o un paragrafo. Possiamo utilizzare l’attributo onclick per implementare questa funzione su un sito web. Iniziamo con una pagina HTML con un pulsante e del testo. Creeremo anche un file JavaScript che conterrà il nostro codice evento.

Questo è un esempio di una pagina web di base, ma non è ancora interattiva. Quando questa pagina web viene eseguita, vedremo un pulsante e del testo, ma non accadrà nulla quando faremo clic sul nostro pulsante. Questo perché non abbiamo ancora implementato la funzione di script onclick.

Ora che la nostra pagina web è pronta, possiamo iniziare a creare il nostro evento onclick. Per prima cosa dobbiamo aggiungere l’ascoltatore di eventi onclick() al nostro pulsante. Questo evento ascolterà per quando l’utente fa clic sul pulsante.

Creiamo il nostro file "onclick.js", che conterrà il codice per il nostro evento changeParagraph(). Questo evento cambierà il testo del nostro paragrafo (l’elemento "p") con qualcosa else.

Abbiamo definito una funzione JavaScript chiamata changeParagraph. Usiamo il metodo JavaScript querySelector per selezionare un paragrafo sulla nostra pagina. Quando carichiamo la pagina per la prima volta, vedremo il nostro pulsante e il testo che dice: "Questo testo cambierà quando fai clic sul pulsante."

Dopo aver fatto clic sul pulsante, la nostra pagina web cambia e spettacoli nostro nuovo testo: SES9UW5H18rpOrMBgZl2G0rKN LrvhzufnH5bMpX7pd YKpLocGpIBvv9FgaeNxPpoFbLQuJKYqi4cIrWOAGWYrOnN96AJ655kefwbfkk1gCClwg P9I9fQ9G8EQnDUzJw

Riepilogo

In generale il codice che consente l’esecuzione di un determinato evento sul web, onclick si fa clic sulla pagina.

Questo è tutto! Utilizzando il codice sopra, abbiamo creato con successo una pagina web che eseguirà il codice quando premiamo un pulsante. Sebbene il nostro codice sopra cambi solo il testo, puoi renderlo complicato o semplice come desideri.

Se vuoi che un utente venga avvisato quando fa clic sul pulsante, puoi utilizzare alert() funzione in JavaScript. Se vuoi aggiungere "se" istruzioni nel tuo codice, puoi farlo anche tu.