Alternar un botón en JavaScript
Este tutorial discutirá cómo alternar un botón usando declaraciones condicionales en JavaScript.
Alternar un botón usando declaraciones condicionales en JavaScript
Podemos alternar un botón usando declaraciones condicionales como la declaración if-else en JavaScript. Podemos alternar casi todas las propiedades de un elemento como su valor, clase, id y color en JavaScript.
Para cambiar cualquier propiedad de un elemento, necesitamos obtener el elemento usando su id o clase. Además, usando el nombre de la propiedad, podemos cambiar el valor de la propiedad.
Por ejemplo, hagamos un botón y cambiemos su texto interno usando la instrucción if-else y la propiedad value. Vea el código a continuación.
<!DOCTYPE html>
<html>
<head></head>
<body>
<form>
<input type="button" id="myButton" value="NO"
onclick="Buttontoggle();">
</form>
</body>
<script type="text/javascript">
function Buttontoggle()
{
var t = document.getElementById("myButton");
if(t.value=="YES"){
t.value="NO";}
else if(t.value=="NO"){
t.value="YES";}
}
</script>
</html>
En el programa anterior, creamos la función Buttontoggle(), que se llamará cada vez que el usuario haga clic en el botón. Cambiará el texto dentro del botón.
Para ejecutar este código, debe copiar este código en un archivo HTML y abrir el archivo con cualquier navegador, y verá el botón. De la misma manera, podemos alternar cualquier propiedad de un elemento. También podemos usar una declaración switch en lugar de una declaración if-else. Ahora, cambiemos el texto usando un botón y la instrucción if-else. Vea el código a continuación.
<!DOCTYPE html>
<html>
<head></head>
<body>
<button onclick="Buttontoggle()">Click to Toggle Text</button>
<div id="123">Some Text</div>
</body>
<script type="text/javascript">
function Buttontoggle()
{
var t = document.getElementById("123");
if(t.innerHTML=="Some Text"){
t.innerHTML="Toggled Text";}
else{
t.innerHTML="Some Text";}
}
</script>
</html>
En el código anterior, usamos un botón para alternar el texto de otro elemento usando su id. La propiedad getElementById se usa para obtener el elemento usando su id, y la propiedad innerHTML se usa para obtener el texto del elemento div. También podemos alternar la clase de un elemento usando la propiedad classList.toggle().
Por ejemplo, creemos un elemento de texto y una hoja de estilo donde estableceremos algunas propiedades de clase myClass como ancho, relleno, color de fondo, color y tamaño de fuente. Ahora podemos usar la clase myClass y la propiedad classList.toggle() para alternar la clase del elemento div. Vea el código a continuación.
<!DOCTYPE html>
<html>
<head></head>
<body>
<button onclick="Buttontoggle()">Click to Toggle Class</button>
<div id="123">Some Text</div>
</body>
<style type="text/css">
.myClass {
width: 50%;
padding: 33px;
background-color: green;
color: white;
font-size: 33px;
}
</style>
<script type="text/javascript">
function Buttontoggle()
{
var t = document.getElementById("123");
t.classList.toggle("myClass");
}
</script>
</html>
En el programa anterior, creamos un botón que se usará para alternar la clase y un elemento div cuya clase se alternará. Usamos la hoja de estilo para establecer algunas propiedades de la clase, que se aplicarán al texto cuando se haga clic en el botón de alternancia.
