0

Gostaria de saber o por que quando eu faço um console.log no meu main.js, retorna null no console, embora, quando eu declare o <script>main.js</script> dentro do body, ele retorna o valor do id que estou procurando. Segue o exemplo com script dentro do head.

(function(win, doc){
    'use strict';

    console.log(document.getElementById('text-link'));

    
})(window, document);
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="main.js"></script>
    
</head>
<body>
	<a id="test-link" >text</a>
    
</body>
</html>

5
  • Você colocou o script do body na parte debaixo do "a"? Commented 28/12/2018 às 23:28
  • Sim. Eu coloquei, e vi que funcionava. Quero entender por que não funciona quando coloco lá no head, abaixo da tag meta.
    – zHardy
    Commented 28/12/2018 às 23:31
  • é porque o html vai carregando de cima para baixo, então colocando em cima, ele carrega o script, mas o "a" ainda não existe, já que ele esta embaixo, para que o seu script funcione, você tem que colocar algo para ele esperar todo o html carregue. Commented 28/12/2018 às 23:35
  • Puts, é verdade, esqueci do escopo. Valeu.
    – zHardy
    Commented 28/12/2018 às 23:58
  • estou finalizando uma resposta para explicar melhor Commented 28/12/2018 às 23:59

1 Resposta 1

1

Utilizei a seguinte instrução:

document.addEventListener("DOMContentLoaded", function(event) {

});

Desta forma, todo o código que se encontra dentro das chaves, só serão executados depois que todo o html já estiver carregado.

Outro problema que encontrei foi o seguinte no seu código Javascript esta escrito text-link e no seu html esta com o id test-link.

Veja um exemplo utilizando o document.addEventListener, perceba que o valor retornado não é nulo, enquanto que o código que esta fora do document.addEventListener retorna o valor nulo, e perceba que a ordem dos alerts são trocadas, já que o document.addEventListener espera que todo o html carregue.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script>
      document.addEventListener("DOMContentLoaded", function(event) {
          alert(document.getElementById('test-link'));
      });
    </script>
    <script>
      alert(document.getElementById('test-link'));
    </script>
</head>
<body>
	<a id="test-link" >text</a>
</body>
</html>

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