Come attivare un pulsante in JavaScript
- Come attivare un pulsante in JavaScript?
- Esempio 1: Modifica dei messaggi di testo a attivare un pulsante
- Esempio 2: pulsante ON/OFF in JavaScript
Come attivare un pulsante in JavaScript?
Un'istruzione condizionale è un requisito di base per attivare un pulsante in JavaScript. Per raggiungere questo obiettivo, è necessario ottenere l'elemento e quindi viene applicata una funzione personalizzata per applicare alcune operazioni specifiche su quell'elemento. La funzione è associata all'evento OnClick del pulsante. In modo che, ogni volta che il pulsante viene fatto clic, quella funzione verrà eseguita. Pratichiamo alcuni esempi per attivare un pulsante in JavaScript.
Esempio 1: Modifica dei messaggi di testo a attivare un pulsante
Un esempio è considerato per modificare un messaggio attivando un pulsante in JavaScript. L'esempio comprende il codice HTML e JavaScript, che è spiegato di seguito:
Codice HTML
Esempio per attivare un pulsante
Premere il pulsante per vedere la magia
Nel codice HTML, la descrizione è la seguente:
- UN Il tag è creato con un "id = js".
- Successivamente, viene creato un pulsante associato a un file "Btntog ()" metodo. Premendo "Pulsante", il metodo "btntog ()" E 'attivato.
- Alla fine, il file JavaScript "test.JS " è passato come src entrotag.
Il codice per il file JavaScript "test.js"È fornito qui:
Codice JavaScript
functionbtntog ()var t = documento.getElementById ("JS");
Se (t.InnerHtml == "Welcome to LinuxHint")
T.InnerHtml = "JavaScript World";
altro
T.InnerHtml = "Welcome to LinuxHint";
In questo codice:
- getelementbyid viene utilizzato per estrarre l'elemento HTML "js"E il valore è memorizzato in una variabile"T".
- Dopodiché, il Innerhtml La proprietà è impiegata nella condizione if per verificare il testo "Benvenuti in Linuxhint".
- Se la condizione è vera, il contenuto "Benvenuti in Linuxhint"È sostituito con “Javascript World".
- Se la condizione è falsa, il testo "Benvenuti a Linuxhint" è assegnato come contenuto HTML al tag DIV.
Produzione
L'output mostra che attivare un pulsante restituisce due messaggi come "Benvenuti a Linuxhint" E "Javascript World" in alternativa.
Esempio 2: pulsante ON/OFF in JavaScript
Un esempio è seguito per modificare il testo in linea del pulsante. In questo esempio, il "ACCESO SPENTO"Il testo cambierà alternativamente il valore premendo il pulsante. I codici HTML e JavaScript sono forniti qui:
Codice HTML
Esempio per attivare un pulsante
onclick = "tgl ();">
Il codice sopra è descritto come:
- Un pulsante cliccabile con un ID di "Mybtn" è creato e il suo valore è impostato su "SPENTO".
- Premendo il pulsante, il tgl () il metodo verrà attivato.
- Alla fine, "test.JS " è attaccato al percorso sorgente all'interno etichetta.
Codice JavaScript
functiontgl ()var t = documento.getElementById ("MyBTN");
Se (t.value == "on")
T.value = "off";
Elseif (t.value == "off")
T.value = "on";
In questo codice:
- UN tgl () Il metodo viene utilizzato per attivare un pulsante in JavaScript.
- In questo metodo, si estraggerà l'elemento HTML impiegando il getelementbyid Proprietà, e quindi la dichiarazione If Else-if viene aggiunta ad essa.
- Se la "Value == ON", attivare il valore a "SPENTO". Se il valore è SPENTO, quindi il valore verrà attivato a "SU".
Produzione
L'output mostra che il pulsante è stato attivato SPENTO A SU.
Questo è tutto! Hai imparato a attivare un pulsante in JavaScript.
Conclusione
In JavaScript, un pulsante può essere utilizzato per alternare tra vari stati dei propri valori, oppure qualsiasi funzione può essere associato all'operazione a levetta. IL al clic() L'evento del pulsante è associato alla funzione. Questo articolo spiega una panoramica del bordo di un pulsante insieme a due esempi pratici. Il primo esempio estrae il testo dal Innerhtml Proprietà e modifica attraverso un pulsante a levetta. Nel secondo esempio, il valore del pulsante stesso viene modificato utilizzando una funzione personalizzata.