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

Cannot set property 'onclick' of null

Referente ao curso JavaScript e HTML: desenvolva um jogo e pratique lógica de programação, no capítulo Interaja de maneira diferente com o usuário e atividade Campo de texto e botão

por Khayan de Carvalho Malantrucco
| 206.4k xp | 63 posts

Pessoal, não consegui rodar o código. O console retorna a seguinte mensagem: Cannot set property 'onclick' of null

O erro aponta para a linha 22 do meu código, no caso: *button.onclick = verifica; *

Não descobri o que está acontecendo. Alguém consegue ajudar?

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


            function verifica() {
                if(input == numeroSorteado) {
                    alert("Você acertou! Parabéns!");
                } else {
                    alert("Você errou!");
                }
            }    
                var button = document.querySelector("button");
                button.onclick = verifica;  

                alert("O número sorteado foi "+numeroSorteado);
3 respostas
por Gabriel Leite
| 3486k xp | 5398 posts
Instrutor

Boa tarde, Khayan! Como vai?

Isso ocorre pq na linha 21 vc faz var button = document.querySelector("button") e como o próprio erro está te informando, o valor da variável button é null. Ou seja, vc não conseguiu obter o elemento cuja tag é button como vc desejava. Isso está acontecendo provavelmente por algum erro no HTML.

Vc poderia postar código HTML e JS completos aqui para eu dar uma olhada e tentar te ajudar?

Aguardo o seu retorno para juntos podermos chegar à luz do conhecimento!

Grande abraço e bons estudos!

por Khayan de Carvalho Malantrucco
| 206.4k xp | 63 posts

Olá, Gabriel! Segue o código na íntegra:

<!DOCTYPE html>

<html lang="pt-BR">

        <h1>Adivinha 3.0!</h1>
        <input>
        <button>VAI!</button>

    <head>
        <meta charset="UTF-8">
        <title>Adivinha 3.0!</title>

        <script>
            var numeroSorteado = Math.round(Math.random() * 10);
            var input = document.querySelector("input");
            input.focus();

            function verifica() {
                if(input.value == numeroSorteado) {
                    alert("Você acertou! Parabéns!");
                } else {
                    alert("Você errou!");
                }
                input.value="";
                input.focus();
            }    
                var button = document.querySelector("button");
                button.onclick = verifica;  

                alert("O número sorteado foi "+numeroSorteado);
        </script>
    </head>


    <body>
        <h1>Adivinha 3.0!</h1>
        <input>
        <button>VAI!</button>
    </body>

</html>
solução!
por Estudante
| 86.4k xp | 36 posts

Coloque o script dentro das tags

<body></body>