Alternar um botão em JavaScript
Este tutorial discutirá como alternar um botão usando instruções condicionais em JavaScript.
Alternar um botão usando declarações condicionais em JavaScript
Podemos alternar um botão usando instruções condicionais como a instrução if-else em JavaScript. Podemos alternar quase todas as propriedades de um elemento como seu valor, classe, id e cor em JavaScript.
Para alterar qualquer propriedade de um elemento, precisamos obter o elemento usando seu id ou classe. Além disso, usando o nome da propriedade, podemos alterar o valor da propriedade.
Por exemplo, vamos fazer um botão e alterar seu texto interno usando a instrução if-else e a propriedade value. Veja o código abaixo.
<!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>
No programa acima, criamos a função Buttontoggle(), que será chamada sempre que o usuário clicar no botão. Ele alternará o texto dentro do botão.
Para executar este código, você precisa copiar este código em um arquivo HTML e abrir o arquivo com qualquer navegador, e você verá o botão. Da mesma forma, podemos alternar qualquer propriedade de um elemento. Também podemos usar uma instrução switch em vez de uma instrução if-else. Agora, vamos alternar o texto usando um botão e a instrução if-else. Veja o código abaixo.
<!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>
No código acima, usamos um botão para alternar o texto de outro elemento usando seu id. A propriedade getElementById é usada para obter o elemento usando seu id, e a propriedade innerHTML é usada para obter o texto do elemento div. Também podemos alternar a classe de um elemento usando a propriedade classList.toggle().
Por exemplo, vamos fazer um elemento de texto e uma folha de estilo onde definiremos algumas propriedades de classe myClass como largura, preenchimento, cor de fundo, cor e tamanho da fonte. Agora podemos usar a classe myClass e a propriedade classList.toggle() para alternar a classe do elemento div. Veja o código abaixo.
<!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>
No programa acima, criamos um botão que será usado para alternar a classe e um elemento div cuja classe será alternada. Usamos a folha de estilo para definir algumas propriedades da classe, que serão aplicadas ao texto quando o botão de alternância for clicado.
