Sintassi dell'evento OnClick
In html
Qui, gli elementi possono essere un pulsante o qualcos'altro. Nell'evento OnClick scriveremo uno script o una funzione. L'evento OnClick supporta quasi tutti gli elementi di HTML tranne , , ,
In js
oggetto.onClick = function () script;In JavaScript, assegneremo una funzione all'evento OnClick. All'interno della parentesi, scriveremo lo script per eseguire un'attività o una funzione.
Esempio 1: evento OnClick per cambiare il colore del testo
Quando facciamo clic su un pulsante su un sito Web, l'evento OnClick innesca un certo comportamento. Ciò potrebbe accadere quando inviamo moduli o dati online quando modifichiamo il contenuto specifico della pagina Web e altri eventi simili. Per praticare l'evento OnClick in un'impostazione del mondo reale, prima scriveremo un semplice HTML con un po 'di stile.
Abbiamo creato una semplice pagina HTML su cui c'è un po 'di testo con un pulsante. Per stilizzare la pagina abbiamo usato alcuni CSS.
Quando facciamo clic sul pulsante, intendiamo rendere il testo blu.
Dopo aver scritto il metodo JavaScript per modificare il colore, dobbiamo aggiungere una proprietà OnClick al nostro pulsante. Pertanto, dobbiamo modificare leggermente il nostro HTML:
Abbiamo aggiunto un evento OnClick all'interno del tag pulsante. Abbiamo assegnato una funzione denominata ChangeColor () da eseguire. Per il risultato, dobbiamo creare un file JS per scriverlo in un file JavaScript o un tag in un file HTML. Tuttavia, scriveremo il nostro script all'interno del file HTML.
Innanzitutto, dobbiamo scegliere l'elemento che desideriamo modificare, che è il testo "Cambia il colore" contenuto all'interno del
etichetta. I metodi GETelementsByClassName (), getElementByID () o queryySelector () DOM in JavaScript possono essere utilizzati per raggiungere questo obiettivo. Il valore viene quindi assegnato alla variabile. Utilizzeremo QuerySelector () in questo esempio perché è più aggiornato e più veloce. Inoltre, le variabili saranno dichiarate utilizzate const. È più sicuro perché aiuta a rendere le variabili di sola lettura.
Ora, all'interno del tag script, scriveremo la nostra funzione.
Come visto sopra in HTML, la funzione che useremo è ChangeColor (). Questo è il motivo per cui ChangeColor è impostato come Identificatore della nostra funzione (nome). Non funzionerà se il nome corrisponde a ciò che è nell'HTML. In Dom per modificare qualsiasi cosa legata allo stile, devi scrivere "stile" seguito da un punto (.). Viene quindi apportata la modifica che si desidera apportare, che potrebbe essere il colore, il colore di sfondo, le dimensioni del testo, ecc. Per accedere al nostro testo "Modifica il colore", useremo il nome della variabile dichiarata nella nostra funzione, quindi impostiamo il colore del testo su Blue. Quando premi il pulsante, il colore del testo cambia in blu:
Aggiungendo più colori al nostro testo, potremmo fare un ulteriore passo avanti:
Quindi, quello che vorremmo fare è rendere il rosso arancione, il verde e il blu. Questa volta, le funzioni HTML OnClick accettano i valori per il colore che desideriamo applicare al testo. In JavaScript, questi sono indicati come parametri. Costruiremo una funzione che accetta anche i suoi parametri. Li chiameremo "colore". Il nostro sito Web ha subito piccole modifiche:
Quindi, scegliamo il nostro testo "Modifica il colore" e inseriamo il codice per renderlo rosso arancione, blu e verde:
Il codice della funzione imposta prima il colore su qualsiasi cosa sia stata fornita alle chiamate ChangeColor () nei pulsanti HTML dopo aver recuperato la variabile del nome, che è stata utilizzata per archiviare il testo “Modifica il colore."
Quando premi uno di quei pulsanti (blu, verde e arancione) il colore del testo cambierà di conseguenza.
Esempio 2: Crea avvisi utilizzando l'evento OnClick
In questo esempio, creiamo una pagina della pagina web di esempio con un pulsante che utilizza HTML. Quando verrà premuto il pulsante, riceveremo un messaggio di avviso nella parte superiore dello schermo. Per creare una pagina Web, useremo il seguente codice:
Verrà creata una pagina Web composta da un pulsante utilizzando questo codice:
Ora, dobbiamo scrivere una funzione JavaScript che verrà eseguita per generare avvisi. Creiamo una funzione showalert () all'interno dei tag di script all'interno dello stesso codice HTML come il seguente:
Quindi, dopo aver scritto il metodo JavaScript per modificare il colore, dobbiamo aggiungere una proprietà OnClick al nostro pulsante. Pertanto, dobbiamo modificare leggermente il nostro HTML:
L'aggiornamento di questo codice aggiungerà funzionalità al pulsante. Quando un utente colpisce il pulsante, la proprietà OnClick sul pulsante fa attivare la funzione Showalert (). Gli utenti della tastiera possono anche utilizzare l'evento OnClick. L'avviso verrà inoltre inviato se un utente utilizza il tasto Tab per passare al pulsante, quindi preme Invio.
Come puoi vedere sopra, dopo aver premuto il pulsante Show Alert abbiamo ricevuto un messaggio di avviso.
Per l'elemento pulsante, è possibile aggiungere un nuovo stile. Per modificare l'aspetto del pulsante quando gli utenti mouse su di esso o una scheda tastiera, usa le CLE CLESS CSS (: Hover ,: Focus e: Active).
Il codice sopra stilicizzerà un pulsante. È solo per l'esperienza dell'utente. Stilizzare il pulsante non influenzerà la funzionalità del pulsante.
Prova a fare clic sul pulsante dopo averlo stimato. Se tutto va in base al piano, il mouse sul pulsante dovrebbe causare una modifica di stile e, come prima, premendo il pulsante dovrebbe far apparire l'avviso con il testo personalizzato visualizzato. Per assicurarti che funzioni anche per gli utenti della tastiera, testalo ora senza mouse.
Esempio 3: evento OnClick per copiare il testo
Possiamo anche copiare il testo da un campo all'altro usando l'evento OnClick e una funzione JavaScript. Creiamo una pagina HTML con due campi di testo di input in modo da poter scrivere dati da copiare.
Dobbiamo scrivere la funzione all'interno dei tag di script, quindi possiamo chiamarli usando l'evento OnClick come segue:
Dopo aver aggiornato il codice, quando si preme il pulsante, l'evento OnClick chiamerà la funzione CopyTxt e il testo del campo TEXT1 verrà copiato nel campo TEXT2.
Conclusione
In questo tutorial, abbiamo visto che quando si fa clic su un elemento, l'evento OnClick consente a un programmatore di eseguire una funzione JavaScript. Possiamo usarlo per molte funzionalità diverse, come i messaggi di avviso e la convalida del modulo, ecc. Abbiamo implementato tre esempi in questo post per mostrarti come puoi cambiare il colore del testo, come creare avvisi e come copiare il testo da un campo a un altro usando l'evento OnClick e le funzioni JavaScript.