0

Estou começando com javascript e fiz o seguinte código abaixo, só que ele não está funcionando no google chrome, por que?

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Teste</title>
</head>
<body>
<form>
    <input type="text" name="teste" id="teste"/>
</form>
</body>
<script type="text/javascript" src="test.js"></script>
</html>

test.js

var teste = document.getElementById("teste");

teste.addEventListener('click', function(){
    alert(1);
});

Já testei ele no Firefox e no site JS Bin e ele funciona perfeitamente.

9
  • Inclua no seu script: <script type="text/javascript" src="test.js" defer></script> 28/05/2017 às 18:13
  • 1
    Inclua também sua tag script antes do fechamento da tag body e não depois. Alias, qual versão do chrome você esta usando? Minha versão 58.0.3029.110 (64-bit) está funcionando, não sei se isso tem influência, mas o chrome corrigiu a estrutura, colocando automaticamente a tag script antes do fechamento do body. 28/05/2017 às 18:18
  • 1
    defer garante que o script seja carregado somente depois do carregamento do html, para versões muito antigas de navegadores, não funciona 28/05/2017 às 18:23
  • 1
    Dica: utilize sempre o modo anonimo para fazer seus testes, e não ha problema em usar o script entre as tags <body> 28/05/2017 às 18:23
  • 1
    Modo anonimo 28/05/2017 às 18:25

2 Respostas 2

4

O problema pode ser o local da tag script, não é correto colocá-la depois do fechamento de body.

Se você pretende que o script seja carregado depois do corpo do HTML, coloque a tag antes do fechamento de body.

Isso pode variar de um browser pra outro e de versão pra versão, eu testei no Chrome e Firefox (ambos no Windows) e em nenhum dos dois o alert foi mostrado. De qualquer forma o melhor é sempre seguir as recomendações da W3C. Veja um trecho retirado da seção sobre a tag script.

This element may appear any number of times in the HEAD or BODY of an HTML document.

Em tradução livre

Este elemento pode aparecer quantas vezes for necessário no HEAD ou BODY de um documento HTML.

Logo, seu código HTML deveria ser:

<body>
  <form>
    <input type="text" name="teste" id="teste"/>
  </form>
  <script type="text/javascript" src="test.js"></script>
</body>

Se você quiser, pode testar no validator da W3C que verá um erro sendo acusado.

-3

Tente adicionar o seguinte código:

window.document.onload = function(e){ 
  var teste = document.getElementById("teste");
  teste.addEventListener('click', function(){
     alert(1);
  });
}

Assim será adicionado o evento ao botão após a página estiver pronta / DOM acessivel

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .