Questa guida dimostrerà l'obiettivo e il funzionamento dell'evento 'onchange' in JavaScript.
Come utilizzare un evento 'onchange' in JavaScript?
IL ' onchange L'evento ” si attiva quando il valore dell'elemento HTML specificato viene modificato. Quando questo evento si attiva, la funzione JavaScript associata viene eseguita per eseguire l'attività specifica.
Sintassi
oggetto. onchange = funzione ( ) { myScript } ;
Nella sintassi precedente:
- elemento: Denota il particolare elemento HTML.
- funzione(): Rappresenta la funzione definita che verrà richiamata al trigger dell'evento.
- mioScript: Si riferisce alla definizione della funzione JavaScript per eseguire l'attività specifica quando si verifica l'evento 'onchange'.
Sintassi (con metodo 'addEventListener()')
oggetto. addEventListener ( 'modifica' , myScript ) ;
Nella sintassi precedente, il ' addEventListener() ” metodo utilizza il “ onchange ” evento per eseguire la funzione JavaScript per l'esecuzione di varie attività.
Esempio 1: applicazione dell'evento 'onchange' per visualizzare il valore selezionato utilizzando la sintassi di base
In questo scenario, un evento 'onchange' è associato a un elenco di opzioni per visualizzare il valore dell'opzione modificato e richiamare la funzione JavaScript corrispondente.
Codice HTML
Dai un'occhiata al seguente codice HTML:
< h2 > onchange Evento in javascript h2 >< P > Scegli un'altra lingua dall'elenco. P >
< selezionare id = 'demo' onchange = 'Campione()' >
< valore dell'opzione = 'HTML' > HTML opzione >
< valore dell'opzione = 'CSS' > CSS opzione >
< valore dell'opzione = 'Javascript' > javascript opzione >
Selezionare >
< p id = 'P1' > P >
Nel codice sopra:
- Per prima cosa, definisci un sottotitolo usando il ' etichetta '.
- Successivamente, aggiungi un paragrafo con l'affermazione dichiarata.
- Dopodiché il “
Il tag 'crea un elenco a discesa con un ID assegnato' dimostrazione ' e il ' onchange ” l'evento reindirizza alla funzione “ Campione() ”, rispettivamente. - Nel corpo del tag '
- Infine, viene creato un paragrafo vuoto con un id ' P1 ” per visualizzare il valore selezionato/modificato dall'elenco delle opzioni.
codice javascript
Ora, panoramica del seguente codice JavaScript:
< copione >funzione Campione ( ) {
Dove = documento. getElementById ( 'demo' ) . valore ;
documento. getElementById ( 'P1' ) . innerHTML = 'L'opzione selezionata è: ' + T ;
}
copione >
Nel blocco di codice sopra:
- Prima di tutto, dichiara una funzione chiamata ' Campione() ”.
- Nella sua definizione, applicare il ' getElementById() ” per accedere al valore dell'opzione selezionata dall'elenco delle opzioni tramite il “ valore ' proprietà.
- Infine, visualizzare il valore utilizzando il ' innerHTML ' proprietà.
Produzione
Come visto nell'output, dopo aver selezionato un'opzione dal menu a discesa, l'evento 'onchange' si attiva e richiama la funzione corrispondente.
Esempio 2: applicazione dell'evento 'onchange' per modificare il testo del campo di input in maiuscolo utilizzando la sintassi del metodo 'addEventListener()'
Questo esempio spiega il funzionamento dell'evento 'onchange' modificando il campo di testo di input in 'Maiuscolo' con l'aiuto del metodo 'addEventListener()'.
Codice HTML
Innanzitutto, passa attraverso il codice HTML fornito di seguito:
< h2 > onchange Evento in javascript h2 >Nome : < tipo di ingresso = 'testo' id = 'demo' >
< pulsante > Invia pulsante >
Nel codice HTML sopra:
- Definire un sottotitolo di livello 2 tramite il ' etichetta '.
- Successivamente, aggiungi un ' ” campo vicino all'etichetta “ Nome ', tipo di contenuto ' testo ” e l'id associato “ dimostrazione ”, rispettivamente.
- Infine, includi un pulsante utilizzando il '
etichetta '.
codice javascript
Quindi, guarda il seguente codice JavaScript:
< copione >documento. getElementById ( 'demo' ) . addEventListener ( 'modifica' , Campione ) ;
funzione Campione ( ) {
Dove = documento. getElementById ( 'demo' ) ;
T. valore = T. valore . toMaiuscolo ( ) ;
}
copione >
In questo blocco di codice:
- Prima il ' documento.getElementById() ” metodo utilizza il “ modifica ” evento che comporterà la modifica del valore del campo di testo di input con id “ dimostrazione ” al clic del pulsante.
- Successivamente, viene definita la funzione 'Sample()' che utilizza il metodo 'document.getElementById()' per accedere al campo di testo di input 'demo' e quindi cambia il suo valore in 'Uppercase' tramite il ' Maiuscolo() ' metodo.
Produzione
Come visto, il testo di input è stato convertito in maiuscolo al clic del pulsante.
Conclusione
JavaScript offre il comunemente usato ' onchange ” evento che si attiva non appena cambia lo stato del valore di un particolare elemento. È simile a ' oninput ” ma l'evento 'oninput' si verifica istantaneamente quando il valore cambia, mentre l'evento 'onchange' si attiva quando il valore dell'evento perde il focus. Questa guida ha dimostrato l'obiettivo, il funzionamento e l'utilizzo dell'evento 'onchange' in JavaScript.