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

Exercici 12 - má pratica

Bom dia A associação de eventos refere-se a resposta da letra C porém para que essa mensgem aparece an tela é preciso fazer a associação a um botão e não a um parágrafo certo ? tentei exexutar o exercicio só com o codigo que é mostrado e não consegui, pois naço tem como associar um evento click a um paragrafo para mostar uma mensagem ou entendi errado. HTML criado

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="exercicio2.js"></script>
</head>    
<boby>
    <p id="p1" onclick="mostra()"> Olá!</p>

</boby>

</html>

JS criado function mostra(){ alert('Fui Clicado'); } document.querySelector('#p1').addEventListener('click',mostra);

mensagem de erro 05:41:10.155 exercicio2.html:8 Uncaught ReferenceError: mostra is not defined at HTMLParagraphElement.onclick (exercicio2.html:8)

Fiz um teste colocando o JS dentro da tag script direto e funcionou ( mostrou a mensagem , mas quando tento referenciar por arquivo da este erro os dois arquivos estão na mesma pasta então pq o caminhao

não funciona ?

Fico no aguardo Muito obrigado

5 respostas

Oi Jorge!

pois naço tem como associar um evento click a um paragrafo para mostar uma mensagem

Na verdade, tem sim! Todos os elementos do HTML tem o atributo onclick.Referência da W3C sobre onclick.


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="exercicio2.js"></script>
  </head>    
  <body>
    <p id="p1">Olá!</p>

</body>

</html>

No código acima, o erro apontado pelo console é

TypeError no console de desenvolvedor indicando que a propriedade addEventListener de um elemento null não pode ser acessada

Ou seja, a tag <p> do querySelector no arquivo exercicio2.js não existe. Isso acontece porque o exercicio2.js está sendo carregado e executado antes mesmo que a tag <p> seja rendereizada na tela!

Para resolver este problema, basta carregar o script após a tag <p>, desta meneira:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
  </head>    
  <body>
    <p id="p1">Olá!</p>

    <script src="exercicio2.js"></script>
</body>

</html>

Agora o querySelector será executado após a criação do <p> e funcionará corretamente!

Lembre-se: a ordem de declaração importa!

Espero ter ajudado! Qualquer outra dúvida pode postar aqui! :)

Bom dia, Muito OBRIGADO, pela resposta. Eu ateé entendi que a ordem imnporta porém acreditava que a obediencia da ordeem era apenas dentro do body. então dependendo do que quero fazer fazer a solcitação a um arquivo .Js na tag

ou no final da tag < body> também interfere na execução certo ? mais uma vez muito obrigado

Oi Jorge!

A hierarquia de execução e carregamento também existe dentro da tag <html>, então o <head> vai ser carregado antes do <body> porque ele é declarado antes.

Geralmente colocamos as tags <script> no final do body, pois seu carregamento pode ser um pouco demorado e isso travaria a tela do usuário, causando uma má experiência.

Carregar os scripts no <head> vai ser necessário somente quando eles são essenciais para carregamento da página, como por exemplo, desenhar um elemento dinamicamente.

Entendido, Obrigado

solução!

Oi Jorge!

Quando algum scuba ou outro aluno te ajudou a resolver um tópico, por favor marque a resposta como solução clicando no botão "marcar como solução" ao lado direito inferior da resposta.

Imagem que aponta onde o aluno deve clicar para marcar uma resposta como solução do tópico

Desta maneira, caso algum aluno tenha uma dúvida relacionada a sua, ele saberá que um tópico parecido já foi resolvido.

Bons estudos!