Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Função que chama outra função diferente

Lógica de programação I: os primeiros programas com JavaScript e HTML

08.Interaja de maneira diferente com o usuário

01 - Campo de texto e botão

Estou nessa parte do curso e estou aprendendo sobre campos de texto e botões. Fiz o código do professor e funcionou perfeitamente. como sou curioso fui tentar fazer de outra maneira. O código pede para tentarmos adivinhar um valor que ele pensou. Da maneira tradicional o professor ensinou a declarar uma variável com o gerador de 0 até 10, e o código ficou da seguinte maneira:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Após testar o código e ver que funcionou como o professor mostrou, decidi alterar para que o gerador de número da CPU fosse uma function, ficando da seguinte maneira:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

No segundo código, mesmo colocando o valor gerado a resposta não bate. O que tem de errado? Lembrando que no segundo código faço a chamada de uma função dentro de outra.

4 respostas

Faaaala Gabriel, beleza?

Não entendi 100% a sua dúvida mas tenho uma ideia do que possa estar te confundindo. Seu código está gerando o número aleatório assim que você clicar no botão, ou seja, depois que já preencheu o valor, isso torna o processo de debuggar um pouco difícil a não ser que você defina um valor fixo só por vias de teste. Exemplo:

    function cpuChoice() {
        var choice = Math.round(Math.random() * 10);
        choice = 4; //com o valor fixo fica mais prático de testar suas condicionais lá em cima, depois é só remover ou comentar aqui
        return choice;
    }

Alguns pontos de atenção:

    function mostraCPU(){
        document.write(cpuRandom());
    }

A function mostraCPU() nunca é chamada e a cpuRandom() nem sequer existe. Outra coisa, quando for postar códigos no fórum, copie seu código, cole, marque ele e use o botão </> ou "Inserir bloco de código", isso facilita para quem for analisar e testar seu código.

Em resumo, o código a seguir foi feito igual ao do instrutor e funciona como deveria:

<meta charset="UTF-8">
<h1>Jogo de Adivinhação contra o CPU</h1>
<p>Dentro dessa página HTML, existe todo o conteúdo para se entender as interações entre <br>JavaScript e HTML. Abra-o e analise-o caso tenha alguma dúvida.</p>

<p>No campo a esquerda, digite o seu palpite e então click no botão para comparar com o <br>o valor da CPU para saber se acertou ou errou.</p>

<input/> 
<button>Clique para comparar</button>
<br>

<script>

    var input = document.querySelector("input");
    var button = document.querySelector("button");
    var choice = Math.round(Math.random()*10);

    function comparador(){
        if(choice == input.value){
            alert("Você acertou")
        }else{
            alert("Você errou!")
        }
    }

    button.onclick = comparador;
    document.write(choice);

</script>

O próximo trecho foi o qual eu modifiquei. Fazendo com que o número aleatório seja produto de uma função:

<meta charset="UTF-8">
<h1>Jogo de Adivinhação contra o CPU</h1>
<p>Dentro dessa página HTML, existe todo o conteúdo para se entender as interações entre <br>JavaScript e HTML. Abra-o e analise-o caso tenha alguma dúvida.</p>

<p>No cambo a esquerda, digite o seu palpite e então click no botão para comparar com o <br>o valor da CPU para saber se acertou ou erro.</p>

<input/> 
<button>Compare com o meu segredo</button>
<br>

<script>

    var input = document.querySelector("input");
    input.focus();
    var inputNum = parseInt(input);

    function cpuChoice() {
        var choice = Math.round((Math.random()*10));
        return choice;
    }

    function comparadorValues() {
        input.value = "";
        if(input.value == cpuChoice()){
            alert("Você acertou! Parabéns!");

        }else{
            alert("Você errou! Tente novamente!");
            input.focus();
        }
    }

    function mostraCpu(){
        document.write(cpuRandom());
    }

    cpuChoice();
    var button = document.querySelector("button");
    button.onclick = comparadorValues;
    document.write(cpuChoice());

</script>

Quando eu vou testar o meu código, a linha document.write(cpuChoice()); serve para na tela já me mostrar qual seria o valor correto. porém quando eu colo o mesmo valor no input e clico no botão para comparar, tenho o retorno do else da function comparadorValues(); Espero ter conseguido explicar melhor. Estou quebrando a cabeça mas estou certo de que logo conseguirei entender o que há de errado.

solução!

Ah, okay, entendi melhor o seu problema. Toda vez que você chama a função cpuChoice(), ela irá gerar um número aleatório, vou tentar exemplificar aqui:

    function comparadorValues() {
        input.value = "";
        if(input.value == cpuChoice()){ //gera mais um número, talvez 8
            alert("Você acertou! Parabéns!");

        }else{
            alert("Você errou! Tente novamente!");
            input.focus();
        }
    }


    cpuChoice(); // gera um número, exemplo 2
    var button = document.querySelector("button");
    button.onclick = comparadorValues;
    document.write(cpuChoice()); // gera outro número, agora poderia ser 4, por exemplo

No seu caso eu recomendaria a alterar todas as linhas que eu comentei da seguinte forma:

    var chosenByCpu = cpuChoice(); // passaremos a salvar o resultado da function em uma variável para não gerar um número novo a cada chamada
    function comparadorValues() {
        input.value = ""; // esta linha precisa ir para o final da function, porque atualmente a comparação está fadada a sempre cair no else
                                     // já que sempre irá comparar o campo vazio com um número  
        if(input.value == chosenByCpu){ 
            alert("Você acertou! Parabéns!");

        }else{
            alert("Você errou! Tente novamente!");
            input.focus();
        }
    }

    var button = document.querySelector("button");
    button.onclick = comparadorValues;
    document.write(chosenByCpu); //aqui vamos escrever o valor gerado inicialmente, ao invés de chamar a função de novo e gerar um número possivelmente diferente

FUNCIONOOOOOUU HAHAHAHA Foi exatamente isso que eu precisava. Muito obrigado Filipe Silveira Albieri; Agora tudo ficou mais claro. E era tão óbvio hahah muito obrigado cara <3