Haga un botón de palanca simple en JavaScript

"Palanca"Es un término que se refiere a la capacidad de cambiar algo entre dos estados o valores diferentes. En varios escenarios, los desarrolladores deben crear un botón de palanca en una página web, como mostrar y ocultar contenido en una página, haciendo clic en el cambio para alternar entre dos estados "en" y "apagado", etcétera.

Este blog describirá el método para crear un botón de palanca simple en JavaScript.

Cómo hacer un botón de palanca simple en JavaScript?

Para hacer un botón de alternancia simple, use la lógica condicional simple con el "valorAtributo para cambiar el estado o el valor del botón.

Ejemplo 1: Alternar el estado del botón

En un archivo HTML, cree un botón y adjunte un "al hacer clic"Evento que llamará a la función con un botón Haga clic:

Defina una función "palanca()"En el archivo JavaScript o la etiqueta que se activará en el botón Haga clic:

functionToggle ()

botón var = documento.getElementById ("BTN");
if (botón.valor == "aceptar")

botón.valor = "rechazar";

Elseif (botón.valor == "rechazar")

botón.valor = "aceptar";

En la función definida anteriormente:

• Primero, obtenga la referencia del botón utilizando su ID asignada con la ayuda del "getElementById ()" método.
• Use la declaración condicional y cambie el valor o el estado del botón. Establezca el valor en "Rechazar"Si es igual a"Aceptar".
• Si el valor del botón es "Rechazar", Contáctalo en"Aceptar".

Producción

Ejemplo 2: Alternar el estado del botón con color

También puede alternar el estilo con el valor del botón usando el "estilo" atributo:

functionToggle ()

botón var = documento.getElementById ("BTN");
if (botón.valor == "aceptar")

botón.valor = "rechazar";
documento.GetElementById ("BTN").estilo.fondo = "rojo";

Elseif (botón.valor == "rechazar")

botón.valor = "aceptar";
documento.GetElementById ("BTN").estilo.fondo = "amarillo";

Como puede ver en la salida, el botón cambia su valor y color en el clic del botón:

Ejemplo 3: alternando el texto

Aquí, alternaremos el texto en el botón Haga clic. En un archivo HTML, primero, cree un botón y un texto usando

Etiqueta que no se mostrará en la página:

Bienvenido a Linuxhint

Defina una función que mostrará el texto en la página web haciendo clic en el botón:

functionToggle ()

VAR Text = documento.getElementById ("bienvenido");
if (texto.estilo.display === 'Ninguno')
texto.estilo.display = 'bloque';
demás
texto.estilo.display = 'ninguno';

Producción

Hemos reunido toda la información esencial relacionada con la creación de un botón de palanca simple en JavaScript.

Conclusión

Para crear un botón de palanca simple, use las declaraciones lógicas condicionales con el "valorAtributo para cambiar el estado o el valor del botón. Un botón de palanca es un elemento de interfaz de usuario útil que puede ayudar a mejorar la funcionalidad y la usabilidad de las aplicaciones JavaScript. Este blog describió el procedimiento para crear un botón de palanca simple en JavaScript con ejemplos detallados.