0

tenho um HTML com um arquivo Javascript vinculado. No Javascript eu tento acessar um elemento desse HTML através de document.getElementById("meuId") e está retornando Null.

Isso deveria acontecer?

No Javascript:

const formCadNot = document.getElementById("cadastrar-noticia")

No HTML:

<script src="js/cadastrarNoticia.js"></script>

...

 <form class="formulario" id="cadastrar-noticia" action="cadastraNoticia">
...

Obs: o caminho do script em "src" está correto. Dentro da pasta onde meu HTML está tem uma pasta "js" co o arquivo cadastrarNoticia.js

7
  • 1
    depende, onde tentou fazer isso? já havia carregado o documento html? tentou colocar o script no final do arquivo html? 17/05/2020 às 20:04
  • Eu carreguei o script já no head do html. Ses eu coloco o script direto no HTML ele funciona. Mas eu quero ele num arquivo separado. Vai ficar muito script no index.html 17/05/2020 às 20:06
  • 1
    @LucasPletsch Utilize o evento window.onload para executar o código após o carregamento da página. 17/05/2020 às 20:08
  • 1
    isso acontece pq o documento ainda não foi carregado e já tentou acessar um elemento que ainda não estava do document. Coloque seu código dentro de um bloco que execute quando o documento estiver todo carregado, assim por exemplo: document.addEventListener("DOMContentLoaded", function(){ seu código aqui }); 17/05/2020 às 20:15
  • 1
    leia mais aqui: developer.mozilla.org/pt-BR/docs/Web/Events/DOMContentLoaded se quiser, posso postar uma resposta comentando, mas acredito que deva ter algo assim já aqui 17/05/2020 às 20:16

1 Resposta 1

1

O problema é que você está carregando o seu script antes de carregar o elemento com o seu id. Sendo assim, no script você tentar obter um elemento que não existe.

A solução para este problema é importar o script abaixo do elemento ou então, criar uma função para ser chamada pelo evento onload quando a página for carregada.

Veja o exemplo abaixo:

function setColor() {
    const div = document.getElementById("myDiv");
    div.style.color = "#f00";
    div.innerText = "Texto colorido com o Javascript.";
}
<body onload="setColor();">
    <div id="myDiv">
        Texto não colorido.
    </div>
</body>

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