Entrar Ainda não tem acesso?
1
resposta

Clique não exibe alerta

Referente ao curso JavaScript e HTML: pratique lógica com desenhos, animações e um jogo, no capítulo Interagindo com o usuário e atividade Nossa tela está viva, ela responde!

por Estudante
| 51.9k xp | 2 posts

Oi pessoal. Tentei realizar a atividade proposta pelo orientador, mas quando abro em algum navegador e clico no canvas, nenhum alerta aparece. Revisei o código e acho que deveria estar funcional. Podem me ajudar com isso?

<canvas width="600" height="400"></canvas>

<script>

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');


    pincel.fillStyle = 'grey';
    pincel.fillRect(0, 0, 600, 400);

    function exibeAlerta(evento) {

        console.log(evento)
        alert('Cliquei');

    }

    tela.onclick = exibeAlerta();

</script>
1 resposta
por Giovanna Moeller
| 624.1k xp | 892 posts
Instrutor iOS Software Engineer

Oi Raphael, tudo bem?

Isso acontece pois quando você atribui a função exibeAlerta() para o evento de clique, devemos chama-lá sem parênteses, dessa forma:

tela.onclick = exibeAlerta;

Mas, por que isso? Porque quando colocamos o parênteses, a função é chamada imediatamente, ou seja, ela não espera o evento de clique acontecer para ser chamada. Além disso, quando chamamos com o parênteses, estamos esperando que ela retorne alguma coisa, mas essa função não retorna nada! Portanto, seu retorno é undefined, então ficaria algo mais ou menos como: tela.onclick = undefined, o que causa um erro.

Por esse motivo, precisamos apenas atribuir a função ao evento, sem chamá-la diretamente.

Espero ter ajudado, bons estudos =)