Aonde está o problema?

Programação
#1

meus caros, bom dia.
estou desenvolvendo um codigo para treinar e aprender javascript, mais precisamente a função switch case mas não consigo achar a origem do problema.
o meu codigo tem 7 botoes.
o que ele deve fazer é o seguinte:
ao clicar no botao 1, deverá aparecer a palavra preto
ao clicar no botao 2, deverá aparecer a palavra verde
e assim sucessivamente.

problema: quando eu clico, nada aparece.
segue o codigo:

codigo html:

Botão Switch 
<body>
    
    <h1>Botão Switch</h1>


    <form>
        <input type="button" value="botao1" onclick="selecionar('preto');" />
        <input type="button" value="botao2" onclick="selecionar('verde');" />
        <input type="button" value="botao3" onclick="selecionar('vermelho');" />
        <input type="button" value="botao4" onclick="selecionar('amarelo');" />
        <input type="button" value="botao5" onclick="selecionar('azul');" />
        <input type="button" value="botao6" onclick="selecionar('rosa');" />
        <input type="button" value="botao7" onclick="selecionar('lilas');" />
    </form>

    <p id="botaoselecionado"></p>
</body>

e agora, segue o código em javascript:

function selecionar (botao) {
switch (botao) {
case ‘botao1’:
document.getElementById(“botaoselecionado”).innerHTML = “preto”;
break;
case ‘botao2’:
document.getElementById(“botaoselecionado”).innerHTML = “verde”;
break;
case ‘botao3’:
document.getElementById(“botaoselecionado”).innerHTML = “vermelho”;
break;
case ‘botao4’:
document.getElementById(“botaoselecionado”).innerHTML = “amarelo”;
break;
case ‘botao5’:
document.getElementById(“botaoselecionado”).innerHTML = “azul”;
break;
case ‘botao6’:
document.getElementById(“botaoselecionado”).innerHTML = “rosa”;
break;
case ‘botao7’:
document.getElementById(“botaoselecionado”).innerHTML = “lilas”;
break;
}

}

#2

Sua comparação no switch está sendo com palavras diferentes do que você está passando como parâmetro. Por exemplo:

onclick="selecionar('preto');"

Aqui você está passando a string ‘preto’ para a função selecionar, mas nenhuma das opções case tem a opção preto, somente ‘botao1’, ‘botao2’ e etc.

Ou você muda o que está passando por parâmetro:

<input type="button" value="botao1" onclick="selecionar('botao1');" />
<input type="button" value="botao2" onclick="selecionar('botao2');" />

Ou muda a verificação no switch:

switch (botao) {
case 'preto':
document.getElementById("botaoselecionado").innerHTML = "preto";
break;
case 'verde':
document.getElementById("botaoselecionado").innerHTML = "verde";
break;

Abraço.

1 curtida
#3

caramba, que erro grotesco. muito obrigada pela sua ajuda.

sabe aquele trofeu que silvio santos premiava , o maior brasileiro de todos os tempos?
eu votaria em terraskill ! :grinning:

1 curtida
#4

Mas nesse caso nem precisa de switch, afinal em cada onclick vc já passa o texto que quer que apareça. Então poderia ser simplesmente:

function selecionar(cor) {
    document.getElementById("botaoselecionado").innerHTML = cor;
}

Também mudei o nome do parâmetro para cor, já que vc passa o nome da cor, e não do botão. Pode parecer um detalhe besta, mas dar nomes melhores ajuda muito na hora de programar.

1 curtida
#5

E só para constar, daria para fazer de outras formas. Por exemplo, você poderia usar o dataset para setar a cor no próprio botão:

<form>
  <input type="button" value="botao1" data-cor="preto"/>
  <input type="button" value="botao2" data-cor="verde"/>
  <input type="button" value="botao3" data-cor="vermelho"/>
  <input type="button" value="botao4" data-cor="amarelo"/>
  <input type="button" value="botao5" data-cor="azul"/>
  <input type="button" value="botao6" data-cor="rosa"/>
  <input type="button" value="botao7" data-cor="lilas"/>
</form>
<p id="botaoselecionado"></p>

Assim, cada botão tem a informação da sua respectiva cor. Depois basta alterar o JavaScript para pegar esta informação do próprio botão:

function selecionar(event) {
    // pega a cor que está no botão que foi clicado
    var cor = event.target.dataset.cor;
    // se tem cor, seta no parágrafo
    if (cor) {
        document.getElementById("botaoselecionado").innerHTML = cor;
    }
}

// adiciona o evento de clique para todos os botões
for (var button of document.querySelectorAll('input[type="button"]')) {
    button.addEventListener('click', selecionar);
}

Veja o exemplo rodando aqui.

#6

@Lanytech
Normal esse tipo de coisa acontecer, com o tempo e treino só melhora um pouco.

@hugokotsubo
De fato não precisa do switch, mas como ela disse que estava treinando, não quis entrar nesse mérito. Quando se está aprendendo, um jeito menos otimizado pode servir pra fixar os conceitos, mesmo que não seja o ideal.

Abraços.

2 curtidas
#7

Entendo perfeitamente. É que eu tenho essa mania de querer “ir um pouco além”.

Concordo que é importante saber usar algo (seja um recurso da linguagem, comando, etc), mas saber quando não precisa usar esse algo também é :slight_smile:

2 curtidas
#8

show de bola, obrigada pela dica. gostei da sua observação ! muito obrigada !

#9

:trophy:

#10

:trophy: