Crea un semplice pulsante a disattivazione in javascript

"Interruttore"È un termine che si riferisce alla capacità di cambiare qualcosa tra due stati o valori diversi. In vari scenari, gli sviluppatori devono creare un pulsante a disattivazione su una pagina Web, come mostrare e nascondere i contenuti su una pagina, facendo clic sull'interruttore per alternare tra due stati, "SU" E "spento", e così via.

Questo blog descriverà il metodo per creare un semplice pulsante a disattivazione in JavaScript.

Come creare un semplice pulsante a disattivazione in javascript?

Per creare un semplice pulsante a disattivazione, utilizzare la semplice logica condizionale con “valore"Attributo per modificare lo stato o il valore del pulsante.

Esempio 1: attivare lo stato del pulsante

In un file HTML, crea un pulsante e allega un “al clic"Evento che chiamerà la funzione su un pulsante Click:

Definire una funzione "attivare ()"Nel file JavaScript o nel tag che attirerà il clic del pulsante:

functiontoggle ()

Var Button = Document.getElementById ("BTN");
Se (pulsante.value == "accetta")

pulsante.value = "rifiuta";

Elseif (pulsante.value == "rifiuto")

pulsante.value = "accetta";

Nella funzione sopra definita:

• Innanzitutto, ottenere il riferimento del pulsante utilizzando l'ID assegnato con l'aiuto di "getElementById ()" metodo.
• Utilizzare l'istruzione condizionale e modificare il valore o lo stato del pulsante. Imposta il valore su "Rifiutare"Se è uguale a"Accettare".
• Se il valore del pulsante è "Rifiutare", Impostalo su"Accettare".

Produzione

Esempio 2: attivare lo stato del pulsante con il colore

Puoi anche attivare lo stile con il valore del pulsante usando "stile"Attributo:

functiontoggle ()

Var Button = Document.getElementById ("BTN");
Se (pulsante.value == "accetta")

pulsante.value = "rifiuta";
documento.getElementById ("BTN").stile.background = "rosso";

Elseif (pulsante.value == "rifiuto")

pulsante.value = "accetta";
documento.getElementById ("BTN").stile.background = "giallo";

Come puoi vedere nell'output, il pulsante cambia il suo valore e il colore sul clic del pulsante:

Esempio 3: attivando il testo

Qui, attiveremo il testo sul clic del pulsante. In un file HTML, prima, crea un pulsante e un testo usando

Tag che non verrà visualizzato nella pagina:

Benvenuti in Linuxhint

Definire una funzione che mostrerà il testo nella pagina Web facendo clic sul pulsante:

functiontoggle ()

var text = documento.getElementById ("Welcome");
if (testo.stile.display === 'none')
testo.stile.display = 'block';
altro
testo.stile.Display = 'Nessuno';

Produzione

Abbiamo raccolto tutte le informazioni essenziali relative alla creazione di un semplice pulsante a disattivazione in JavaScript.

Conclusione

Per la creazione di un pulsante di disattivazione semplice, utilizzare le istruzioni logiche condizionali con "valore"Attributo per modificare lo stato o il valore del pulsante. Un pulsante a levetta è un utile elemento dell'interfaccia utente che può aiutare a migliorare la funzionalità e l'usabilità delle applicazioni JavaScript. Questo blog ha descritto la procedura per creare un semplice pulsante a disattivazione in JavaScript con esempi dettagliati.