1
resposta

Porque o button não funciona ? Uncaught TypeError: Cannot set properties of null (setting 'onclick')

let segredo1 = 3;
let segredo2 = 4;
let segredo3 = 5;

let input = document.querySelector("input"); 


function verifica(){

    if(input.value == segredo){

        alert("Você acertou. Parabens!");
    } else {

        alert("Você errou, tente novamente!");
    }

    input.value = "";
    input.focus();
}

let button = document.querySelector("button");
button.onclick = verifica;

Além do button, tem outros também que da o mesmo erro.

1 resposta

Olá, Maicon! Tudo certo?

Antes de tudo, peço desculpas pela demora em retornar.

O button não está funcionando, pois você não o criou no "mundo HTML", a mesma coisa ocorre com o input. Dessa forma, podemos realizar os seguintes comandos (fora das tags de abertura e fechamento <script></script>):

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

Além disso, você poderá notar que a estrutura de condição da função verifica() não será executada como deveria, pois estamos fazendo a seguinte verificação: input.value == segredo. Em nosso código não existe a variável segredo, apenas segredo1, segredo2 e segredo3, que não serão reconhecidas durante esse processo. Para que isso seja possível, podemos criar uma lista para os três valores:

var segredos = [3, 4, 5];

Agora, para que a nossa função seja capaz de verificar se o número digitado pelo usuário está dentro da nossa lista de segredos, podemos organizar nosso código da seguinte maneira:

<meta charset="UTF-8">
<input />
<button>Compare com o meu segredo</button>

<script>

    var segredos = [3, 4, 5];
    let input = document.querySelector("input"); 
    let achou = false;

    function verifica() {

        for (var posicao = 0; posicao < segredos.length; posicao++) {
            if(input.value == segredos[posicao]){
                alert("Você acertou. Parabens!");
                achou = true;
                break;
            } 
        }

        if (achou == false){
            alert("Você errou, tente novamente!");
        }

        input.value = "";
        input.focus();
    }

    let button = document.querySelector("button");
    button.onclick = verifica;

</script>

Para cada valor da nossa lista, haverá uma verificação (nesse caso, quem está nos proporcionando isso é a estrutura de repetição for. Caso o usuário acerte o valor, a repetição acabará através do break e determinaremos, a partir da variável achou, que o valor digitado pelo usuário foi encontrado, atribuindo a ela o valor true.

Em contrapartida, caso o usuário seja azarado e erre todas as possibilidades, aparecerá em tela a mensagem "Você errou, tente novamente!", pois a variável achou, inicializada no início do nosso programa, continuará com o valor false.

Caso tenha dúvidas sobre minha explicação ou com relação ao curso, sinta-se confortável para enviá-las ao fórum! Fico à disposição para te ajudar no que for preciso!

Bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!