Selecionar botão com switch em JavaScript. Dica 17

Nesta dica conferimos como selecionar um botão utilizando switch em JavaScript.

Para isto temos um documento HTML padrão

Assista ao vídeo:

E inicialmente o documento JS está em branco.

A primeira coisa que faremos são os botões, para fazer os botões eu utilizo input pois utilizando a tag button da um pequeno bug no final.

Agora precisamos vincular nossos botões feitos no HTML no JS, e para isso eu utilizarei o evento onclick.

onclick=""

Isto em cada botão. Dentro deste evento onclick vou informar uma função que será criada no JS.

E neste momento vamos começar a escrever nosso código fonte JavaScript. Criando a função que acabamos de citar no HTML.

function selecionar () {

}

Relembrando a dica 4 deste curso, vemos que podemos inserir parâmetros a nossa função, então, neste caso, eu vou informar um parâmetro que, servirá como a variável do nosso switch.

Link da dica 4, funções em JavaScript (abre em outra aba)

function selecionar (qualBotao) {
}

Switch em JavaScript

Se você já programou em outra linguagem de programação, muito provavelmente já utilizou algum switch e sabe que o switch trabalha com opções.

switch (variável) {
opção :
}

Então, nosso switch inicialmente fica assim:

switch (qualBotao) {
case :
}

Quando o switch é "simples", quando for uma variável eu só precisarei informar os possíveis valores dessa variável nos cases. Mas como eu estou trabalhando com botões, preciso conferir qual botão foi clicado.

Voltando ao HTML, dentro de cada onclick eu informo qual o valor de cada botão.

E a partir dos valores que eu inseri vou criando os cases do meu switch.

case 'P':
document.getElementById("botaoSelecionado").innerHTML = "Tamanho P";
break;

No código fonte acima temos "muita" informação nova, então vamos cita-las.

innerHTML

Neste caso, a propriedade innerHTML é utilizada para escrever no documento HTML.

getElementById

E getElementById é utilizado para informar onde será escrito. getElementById é responsável por gerenciar o conteúdo de um determinado elemento a partir do seu ID, então, precisamos criar uma tag atribuindo a ela o id informado no ultimo código fonte.

Neste caso eu utilizei a tag p, mas você pode utilizar outras tags, assim como h1, span, e outras.

break

Neste exemplo o break serve para informar que, caso o case seja verdade pare o script.

O código fonte a seguir são os cases de todos os botões

case 'P':
document.getElementById("botaoSelecionado").innerHTML = "Tamanho P";
break;
case 'M':
document.getElementById("botaoSelecionado").innerHTML = "Tamanho M";
break;
case 'G':
document.getElementById("botaoSelecionado").innerHTML = "Tamanho G";
break;

Agora precisamos criar um default para quando o valor informado não for nenhum dos cases, nesta dica nós criamos um default somente para finalizar nosso switch.

default:
document.getElementById("botaoSelecionado").innerHTML = "erro";

Agora é só testar este código fonte em seu navegador, a seguir temos o código fonte HTML final.

<!DOCTYPE html>
<html>
    <head>
        <title>switch em JavaScript. Dica 17</title>
        <script src="switch.js"></script>
        <meta charset="UTF-8">
    </head>
    <body>
        <h1>switch em JavaScript. Dica 17</h1>
        <form>
            <input type="button" value="P" onclick="selecionar('P');" />
            <input type="button" value="M" onclick="selecionar('M');" />
            <input type="button" value="G" onclick="selecionar('G');" />
        </form>
        <p id="botaoSelecionado"></p>
    </body>
</html>

E agora o código fonte JS final.

function selecionar (qualBotao) {
switch (qualBotao) {
        case 'P':
        document.getElementById("botaoSelecionado").innerHTML = "Tamanho P";
        break;
        case 'M':
        document.getElementById("botaoSelecionado").innerHTML = "Tamanho M";
        break;
        case 'G':
        document.getElementById("botaoSelecionado").innerHTML = "Tamanho G";
        break;
    default:
        document.getElementById("botaoSelecionado").innerHTML = "erro";
    }
}

Lembrando que eu quebrei a identação (um pouco) do código fonte JS para que não precisa-se diminuir a letra durante o vídeo. Valendo a pena salientar que se for implementar isso na pratica e, selecionar esse botão alterar algo dentro do seu servidor (diretamente), vale a pena fazer essa seleção com alguma linguagem backend.

Dica

Lembra que no inicio desta dica eu informei que não utilizo a tag button? Troque a tag input pela tag button e veja o resultado você mesmo. Por curiosidade você pode inserir algum CSS neste código fonte, deixando os botões verticais, aumentando, diminuindo. Altere o id, o parâmetro da função, crie mais botões.

Espero que esta dica tenha sido útil.

Se estiver utilizando bloqueador de propaganda, por favor, coloque este site na lista branca (isto sempre será apenas um pedido). Obrigado pela escolha.