Cómo alternar un botón en JavaScript
- Cómo alternar un botón en JavaScript?
- Ejemplo 1: Modificación de mensajes de texto alternando un botón
- Ejemplo 2: Botón de activación/apagado en JavaScript
Cómo alternar un botón en JavaScript?
Una declaración condicional es un requisito básico para alternar un botón en JavaScript. Para lograr esto, debe obtener el elemento y luego se aplica alguna función personalizada para aplicar alguna operación específica en ese elemento. La función está asociada con el evento OnClick del botón. Para que, cada vez que se haga clic en el botón, esa función se ejecutará. Practicemos algunos ejemplos para alternar un botón en JavaScript.
Ejemplo 1: Modificación de mensajes de texto alternando un botón
Se considera un ejemplo para modificar un mensaje alternando un botón en JavaScript. El ejemplo comprende el código HTML y JavaScript, que se explican a continuación:
Código HTML
Ejemplo para alternar un botón
Presione el botón para ver la magia
En el código HTML, la descripción es la siguiente:
- A La etiqueta se crea con un "ID = JS".
- Después de eso, se crea un botón asociado con un "Btntog ()" método. Presionando "Botón", el método "btntog ()"Se activa.
- Al final, el archivo JavaScript "prueba.JS " se pasa como SRC dentroetiquetas.
El código para el archivo JavaScript "prueba.js"Se proporciona aquí:
Código JavaScript
functtntog ()var t = documento.getElementById ("js");
si t.innerhtml == "Bienvenido a Linuxhint")
T.innerhtml = "JavaScript World";
demás
T.innerhtml = "Bienvenido a Linuxhint";
En este código:
- GetElementByid se utiliza para extraer el elemento HTML "js"Y el valor se almacena en una variable"T".
- Después de eso, el innerhtml La propiedad se emplea en la condición if para verificar el texto "Bienvenido a Linuxhint".
- Si la condición es verdadera, el contenido "Bienvenido a Linuxhint"Se reemplaza con "Javascript World".
- Si la condición es falsa, el texto "Bienvenido a Linuxhint" se asigna como contenido HTML a la etiqueta DIV.
Producción
La salida muestra que alternar un botón devuelve dos mensajes como "Bienvenido a Linuxhint" y "Javascript World" alternativamente.
Ejemplo 2: Botón de activación/apagado en JavaScript
Se sigue un ejemplo para cambiar el texto en línea del botón. En este ejemplo, el "ENCENDIDO APAGADO"El texto cambiará alternativamente el valor presionando el botón. Los códigos HTML y JavaScript se proporcionan aquí:
Código HTML
Ejemplo para alternar un botón
onClick = "tgl ();">
El código anterior se describe como:
- Un botón que se puede hacer clic que tiene una ID de "Mybtn" se crea y su valor se establece en "APAGADO".
- Al presionar el botón, el TGL () El método se activará.
- Al final, "prueba.JS " está unido a la ruta fuente dentro etiqueta.
Código JavaScript
functionTgl ()var t = documento.getElementById ("mybtn");
si t.valor == "on")
T.valor = "apagado";
elseif (t.valor == "apagado")
T.valor = "on";
En este código:
- A TGL () El método se utiliza para alternar un botón en JavaScript.
- En este método, extrae el elemento HTML empleando el GetElementByid propiedad, y luego la instrucción if if if se agrega.
- Si el "Valor == ON", alternar el valor para "APAGADO". Si el valor es APAGADO, entonces el valor se alternará a "EN".
Producción
La salida muestra que el botón ha sido alternado desde APAGADO a EN.
Eso es todo! Has aprendido a alternar un botón en JavaScript.
Conclusión
En JavaScript, se puede usar un botón para alternar entre varios estados de sus propios valores, o cualquier función puede asociarse con la operación de alternativa. El al hacer clic() El evento del botón está asociado con la función. Este artículo explica una descripción general de alternar un botón junto con dos ejemplos prácticos. El primer ejemplo extrae el texto por el innerhtml propiedad y lo modifica a través de un botón de palanca. En el segundo ejemplo, el valor del botón en sí se cambia utilizando una función personalizada.