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

Lógica de programação II, interagindo com o usuário, Nossa tela está viva, ela responde!

Quando abro no navegador, o quadrado cinza é desenhado, porem quando eu clico não há exibição de nenhum alerta... Eu fiz exatamente como o código do instrutor estava no vídeo... alguém pode me ajudar?

<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>
4 respostas

Eu consegui fazer o seu código funcionar fazendo os seguintes ajustes:

<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.addEventListener("click", exibeAlerta);
</script>
solução!

Veja que no seu código original, há este erro:

      alert(Cliquei);

Você esta imprimindo uma variável chamada Cliquei que não existe. No caso, você quer exibir é uma string, então o correto é

      alert("Cliquei");

Além disso há outro problema. Você na hora de associar a função, escreveu assim:

    tela.onClick = exibeAlerta;

O correto é

    tela.onclick = exibeAlerta;

Veja que onclick é tudo minúsculo.

Nos vídeos e nas explicações eu faço corretamente. Com essas alterações que apontei no seu código ele funcionará corretamente. No final, não houve erro de lógica de sua parte, apenas de digitação. Os mais sérios são de lógica, quando há.

Olá Thiago

Tenho 2 observações no seu código:

1) alert(Cliquei) > o texto "Cliquei" tem que estar entre aspas por se tratar de um texto.

2) onClick > esta com o "C" em caixa alta e o correto e tudo em caixa baixa. (onclick)"

Segue o código alterado.

Espero que tenha contribuído com o aprendizado.

Qualquer coisa posta ai. Abraços!

<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>

obrigado pela ajuda, o código funcionou com as alterações propostas por vocês... Eu não me atentei que no vídeo estava:

onclick

E não:

onClick

Alem da falta das aspas...

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software