Button não funciona

Olá Leonardo, tudo bem ?

Será que você não se esqueceu de chamar o método verifica :

    var segredo = 8;
    var input = document.querySelector("input");
    var button = document.querySelector("button");
        button.onclick = verifica();

--restante--

Faz o teste e fala para gente !

Abraços

Oi Leo, você tem dois erros no seu código. Nas barras que fecham as tags do botão e do script.

<meta charset="UTF-8">

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

<script>
    //resto do código

<script/> // e aqui

as tags do button e do script são fechadas assim:

<button></button>

<script></script>

Você se confundiu por causa da tag do input que é fechada como você fez ou não precisa ser fechada. dá uma olhada nesse tópico aqui

Bom dia Leite!

Pegando todas as dicas que os demais colegas postaram aqui, seu código, alterado para funcionar fica assim:

<meta charset="UTF-8">

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

<script>

    var segredo = 8;
    var input = document.querySelector("input");
    var button = document.querySelector("button");
    button.onclick = verifica;

    function verifica() {

        if(input.value == segredo) {
            alert("Parabéns!Você acertou o número secreto.");
        }
        else {
            alert("Infelizmente, você errou!");
        }
    }
</script>

Veja, que além deu ter seguido a recomendação deles, eu também indentei o seu código para ficar melhor do que ja é.

Aguardamos seu feedback para saber se esta tudo compreendido.

Abraço!

Flávio,

No evento onclick do button, não deve chamar a função verifica() ?

Não, não deve. Se você fizer isso, estará passando o retorno da função para o botão e a função nem return tem. Você quer passar é a função inteira para o botão para que ele possa chamá-la, por isso não tem o verifica().

Quem vai fazer verifica() por debaixo dos panos é o navegador quando você clicar no botão. Para você ficar ninja, vou colocar no post a seguir a diferença.

Vou colocar um código mais simples para você compreender.

<meta charset="UTF-8">
<script>
    function grita() {
      return 'Oláaaaa!';
    }

    console.log(grita);
</script>

O que é exibido no console com console.log(grita)? Faça um teste no seu navegador, é importante. Será impresso no console o corpo da função. Isso porque, não estamos executando a função, apenas imprimindo a função e a impressão de uma função é sua estrutura, seu conteúdo.

E agora, faça essa modificação:

<meta charset="UTF-8">
<script>
    function grita() {
      return 'Oláaaaa!';
    }

    console.log(grita()); // veja que abrir e fechei os parênteses
</script>

Agora, o que sai no console? Vai oláaaaa. Isso, porque não estamos imprimindo a função, mas o retorno dela. Quando usamos () em uma função é porque queremos invocá-la e ela pode ou não retornar algo.

Então, quando no código você faz:

  button.onclick = verifica;

Você esta dizendo que dentro de button.onclick (entenda o onclick como se fosse uma variável ) você não esta guardando o retorno da função verifica, mas a função, sua estrutura. E nem poderia usar () porque verifica não tem return e o resultado é undefined.

Se agora button.onclick possui a mesma estrutra de verifica, quando você clicar com o botão no navegador é o navegador, não você, que chamará a função guardada no button.onclick, ou seja, é o navegador que usará o () para executar a função.

Ficou mais claro porque tem que ser button.onclick = verifica? E mais do que isso, se você fizesse button.onclick = verifica() você estaria executando a verificação antes do botão ser clicado, porque estaria chamando a função e não faz sentido, porque você nem daria dado tempo para o usuário digitar o chute dele.

Ficou mais claro agora? O Matheus pediu para fazer um teste apenas, não quer dizer que funcionaria.

Perfeito Flávio!

Olá Vânia, você estava certa, foi a barra do input que me confundiu.

Obrigado pessoal. Agora deu certo.