JavaScript onClick

introduzione

JavaScript è un linguaggio di programmazione ben noto. È usato in oltre il 95% dei siti Web con cui interagiamo quotidianamente. Puoi spesso vedere che al clic di un pulsante, viene cambiata un'intera pagina, viene aperto un campo di modulo o appare una casella pop-up. Dal punto di vista di un programmatore/sviluppatore, come possiamo implementare tali funzionalità e gestire le interazioni del sito Web con gli utenti? Quando si tratta di interazione, JavaScript fornisce funzioni integrate per controllare gli eventi su un sito.

Esistono due tipi di eventi in JavaScript:

• Ascoltatore di eventi - ascolta e attende che l'evento venga licenziato
• Gestore di eventi - eseguito quando un evento viene licenziato

In questo articolo, imparerai sul gestore di eventi più usato di JavaScript, il al clic evento. Ci sono altri gestori di eventi per il bilico su un elemento o per le pressioni dei tasti della tastiera, ma in questo articolo ci concentreremo sull'evento OnClick.

L'evento OnClick viene utilizzato per eseguire determinate attività al clic di un pulsante o interagendo con un elemento HTML.

Ora ti mostreremo un esempio per dimostrare come funziona l'evento OnClick.

Esempio: modificare il testo usando OnClick

In questo esempio, cambieremo una selezione di testo sul clic di un pulsante utilizzando l'evento OnClick. Innanzitutto, faremo un tag di paragrafo e gli daremo un "paragrafo" per accedervi in ​​seguito. Creeremo un pulsante con l'evento OnClick e chiameremo la funzione denominata "Modifica."

Linuxhint

Modifica!

Nel file di script, creeremo una variabile di flag che ci consentirà di controllare lo stato del testo nel nostro tag paragrafo HTML. Quindi, scriveremo una funzione che definisce la funzione di "modifica". Nella definizione della funzione, creeremo un'istruzione "if", in cui controlleremo lo stato utilizzando la variabile flag. Modificheremo anche il testo e altereremo la bandiera. È un pezzo di codice piuttosto semplice!

var a = 1;
funzione change ()
if (a == 1)
documento.getElementById ("paragrafo").InnerHtml = "LinuxHint è fantastico"
a = 0;
altro
documento.getElementById ("paragrafo").InnerHtml = "LinuxHint"
a = 1;

Va bene! Dopo aver scritto tutto questo codice, eseguiremo il codice, passeremo al nostro browser e fai clic sul pulsante appena creato. Dopo aver fatto clic sul pulsante, il testo deve essere modificato da "Linuxhint" a "LinuxHint è fantastico."

Possiamo applicare la stessa tecnica ovunque per cambiare il contenuto del nostro sito Web in base alle nostre esigenze. Possiamo usarlo per modificare un'immagine o eseguire qualsiasi tipo di attività che possiamo immaginare con questo strumento.

Conclusione

Questo articolo spiega come utilizzare l'evento OnClick. In questo articolo, hai imparato il concetto della funzione OnClick in modo pratico. L'uso dell'evento OnClick è così semplice, anche un principiante può iniziare a lavorare con questa funzione. Puoi continuare a imparare, lavorare e acquisire più esperienza in JavaScript su Linuxhint.com per avere una migliore comprensione di questo linguaggio di programmazione. Grazie mille!