Não é possível definir a propriedade 'innerHTML' de nulo


99

Por que recebo um erro ou TypeError não detectado: não é possível definir a propriedade 'innerHTML' de nulo? Achei que entendia o innerHTML e já o tinha funcionando antes.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>

<script type ="text/javascript">
    what();
    function what(){
        document.getElementById('hello').innerHTML = 'hi';
    };
</script>

</head>

<body>
<div id="hello"></div>
</body>
</html>

Respostas:


176

Você deve colocar o hellodiv antes do script, para que exista quando o script for carregado.


18
Se você usar window.onload = function name () {}, não importa se o div é anterior ou posterior.
Colyn1337

1
Solução crocante. Mas ainda estou recebendo o erro. Em chrome / fedora 25 / apache
Vishal Kumar Sahu,

51

Vamos primeiro tentar entender a causa raiz por que isso está acontecendo em primeiro lugar.

Por que recebo um erro ou TypeError não detectado: não é possível definir a propriedade 'innerHTML' de nulo?

O navegador sempre carrega todo o HTML DOM de cima para baixo. Qualquer código JavaScript escrito dentro das scripttags (presente na headseção de seu arquivo HTML) é executado pelo mecanismo de renderização do navegador mesmo antes de todo o DOM (várias tags de elemento HTML presentes na tag body) ser carregado. Os scripts presentes na headtag estão tentando acessar um elemento com id helloantes mesmo de ele ter sido realmente renderizado no DOM. Obviamente, o JavaScript falhou em ver o elemento e, portanto, você acabou vendo o erro de referência nula.

Como você pode fazer isso funcionar como antes?

Você deseja mostrar a mensagem "oi" na página assim que o usuário acessa sua página pela primeira vez. Portanto, você precisa conectar seu código em um ponto em que estiver completamente certo de que o DOM está totalmente carregado e o helloelemento id está acessível / disponível. É alcançável de duas maneiras:

  1. Reordene seus scripts : desta forma, seus scripts são disparados somente depois que o DOM que contém o helloelemento id já estiver carregado. Você pode conseguir isso simplesmente movendo a tag do script após todos os elementos DOM, ou seja, na parte inferior, onde a bodytag está terminando. Como a renderização acontece de cima para baixo, seus scripts são executados no final e você não enfrenta nenhum erro.

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Untitled Document</title>
    </head>
    
    <body>
    <div id="hello"></div>
    
    <script type ="text/javascript">
        what();
        function what(){
            document.getElementById('hello').innerHTML = 'hi';
        };
    </script>
    </body>
    </html>

  1. Use o gancho de evento : o mecanismo de renderização do navegador fornece um gancho baseado em window.onloadevento por meio de evento que dá a dica de que o navegador terminou de carregar o DOM. Portanto, no momento em que este evento for disparado, você pode ter certeza de que seu elemento com helloid já carregado no DOM e qualquer JavaScript disparado posteriormente que tente acessar este elemento não falhará. Então você faz algo como o trecho de código abaixo. Observe que, neste caso, o seu script funciona, embora esteja presente na parte superior do seu documento HTML dentro da headtag.

<!DOCTYPE HTML>
        <html>
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Untitled Document</title>
        <script type ="text/javascript">
            window.onload = function() {
            what();
            function what(){
                document.getElementById('hello').innerHTML = 'hi';
            };
        }
        </script>
        </head>
        
        <body>
        <div id="hello"></div>
        </body>
        </html>


Coisas boas, mas eu acrescentaria, não acho que a função que faz document.getElementById (..). InnerHTML. precisa ser colocado no onload. Como isso pode ser carregado antes que o DOM seja carregado, não há erro. Apenas sua chamada precisa ser. jsfiddle.net/fbz6wLpd/8
barlop

40

Você poderia dizer ao javascript para executar a ação "onload" ... Tente com isto:

<script type ="text/javascript">
window.onload = function what(){
document.getElementById('hello').innerHTML = 'hi';
};
</script>

11

Basta colocar o seu JS em window.onload

window.onload = function() {

        what();

        function what() {
            document.getElementById('hello').innerHTML = 'hi';
        };

    }

7

A parte JavaScript precisa ser executada assim que a página for carregada, portanto, é aconselhável colocar o script JavaScript no final da tag body.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Example</title>

</head>
<body>
<div id="hello"></div>
<script type ="text/javascript">
    what();
    function what(){
        document.getElementById('hello').innerHTML = 'hi';
    };
</script>  
</body>
</html>


2
Você pode, por favor, parar de colocar cada palavra em maiúscula?
VortexYT

6

Javascript parece bom. Tente executá-lo depois que o div for carregado. Tente executar apenas quando o documento estiver pronto. $(document).readyem jquery.


1
também o atributo de tipo em tags de script são obsoletos.
JT Nolan de

2
e importar o jquery para resolver isso é um exagero, a menos que você planeje usá-lo para este projeto aqui em diante. window.onloadpode ser suficiente, mas há outros eventos disponíveis também. Ref ao MDN em window: developer.mozilla.org/en-US/docs/Web/API/Window
Sgnl de

5

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Example</title>

</head>
<body>
<div id="hello"></div>
<script type ="text/javascript">
    what();
    function what(){
        document.getElementById('hello').innerHTML = '<p>hi</p>';
    };
</script>  
</body>
</html>


Sua resposta está correta, mas peço que adicione algum contexto ao seu código-fonte. Respostas apenas em código são difíceis de entender. Ajudará tanto o autor da pergunta quanto os futuros leitores se você puder adicionar mais informações em sua postagem.
RBT

3

Aqui está o meu trecho, experimente. Espero que seja útil para você.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
</head>

<body>
  
<div id="hello"></div>
  
<script type ="text/javascript">
    what();
    function what(){
        document.getElementById('hello').innerHTML = 'hi';
    };
</script>
</body>
</html>


3

Você pode tentar usar o método setTimeout para certificar-se de que seu html carregue primeiro.


3

A causa raiz é: o HTML em uma página deve ser carregado antes do código javascript . Resolvendo de 2 maneiras:

1) Permitir o carregamento de HTML antes do código js.

<script type ="text/javascript">
    window.onload = function what(){
        document.getElementById('hello').innerHTML = 'hi';
    }
</script>

//or set time out like this:
<script type ="text/javascript">
    setTimeout(function(){
       what();
       function what(){
          document.getElementById('hello').innerHTML = 'hi';
       };
    }, 50);
    //NOTE: 50 is milisecond.
</script>

2) Mova o código js para o código HTML

<div id="hello"></div>
<script type ="text/javascript">
    what();
    function what(){
        document.getElementById('hello').innerHTML = 'hi';
    };
</script>

1

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
</head>
<body>
<div id="hello"></div>
<script type ="text/javascript">
    what();
    function what(){
        document.getElementById('hello').innerHTML = 'hi';
    };
</script>
</body>
</html>


o problema é o primeiro div html carregado ... do que a chamada da função java script, agora funciona ...
user2114253

1

Eu tive o mesmo problema e acontece que o erro nulo foi porque eu não salvei o html com o qual estava trabalhando.

Se o elemento referido não foi salvo depois de carregada a página é 'nulo', pois o documento não o contém no momento do carregamento. Usar window.onload também ajuda na depuração.

Espero que tenha sido útil para você.


1

Este erro pode aparecer mesmo se você carregar o seu script depois que a renderização do html for concluída. Neste exemplo dado, seu código

<div id="hello"></div>

não tem valor dentro do div. Portanto, o erro é gerado, porque não há valor a ser alterado por dentro. Deveria ter sido

<div id="hello">Some random text to change</div>

então.


0

Adicionar jquery em < head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

Use $ document.ready () : o código pode estar em < head>ou em um arquivo separado como main.js

1) usando js no mesmo arquivo (adicione no < head>):

<script>
$( document ).ready(function() {
function what(){
    document.getElementById('hello').innerHTML = 'hi';
};
});
</script>

2) usando algum outro arquivo como main.js (adicione-o no < head>):

<script type="text/javascript" src="/path/to/main.js" charset="utf-8"></script>

e adicione o código no arquivo main.js :)


0

Você precisa mudar divpara p. Tecnicamente, innerHTML significa que está dentro da <??? id=""></???>peça.

Mudança:

<div id="hello"></div>

para dentro

<p id="hello"></p>

Fazendo:

document.getElementById('hello').innerHTML = 'hi';

vai virar

<div id="hello"></div> into this <div id="hello">hi</div>

o que na verdade não faz sentido.

Você também pode tentar mudar:

document.getElementById('hello').innerHTML = 'hi';

nisso

document.getElementById('hello').innerHTML='<p> hi </p> ';

para fazer funcionar.


0

O erro é autoexplicativo, ele não está obtendo a tag HTML na qual você deseja definir os dados. Portanto, torne a tag disponível para JS e só então você poderá definir os dados para isso.


0

Sem dúvida, a maioria das respostas aqui está correta, mas você também pode fazer isso:

document.addEventListener('DOMContentLoaded', function what() {
   document.getElementById('hello').innerHTML = 'hi';  
});

0

Existem diferentes causas possíveis, conforme discutido, apenas gostaria de acrescentar isso para alguém que possa ter o mesmo problema que o meu.

No meu caso, faltava um div próximo, conforme mostrado abaixo

   <!DOCTYPE HTML>
   <html>
   <head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <title>Untitled Document</title>
   </head>
   <body>
   <div> //I am an open div
    <div id="hello"></div>
   <script type ="text/javascript">
       what();
       function what(){
          document.getElementById('hello').innerHTML = 'hi';
       };
   </script>
   </body>
   </html>

A falta de um div próximo pode resultar na desorganização da transversal de filho para pai ou pai para filho, resultando em um erro ao tentar acessar um elemento no DOM


Responda conforme o exemplo de OPs.
mishsx

@mishsx o motivo da minha resposta: eu tive exatamente o mesmo erro e quando pesquisei vi as correções de todos, mas não era a correção no meu caso, fazer a mesma pergunta seria duplicado, senti que outra pessoa poderia estar na exata mesma situação também e decidi postar meu próprio erro e corrigi-lo como uma resposta ... como você pode ver, está claramente afirmado na resposta, portanto, será útil para aqueles que estão exatamente na mesma situação e ainda claro para os outros que isso não é é a correção para o erro na pergunta. Se isso não estiver ok, por favor, conselho sobre como devo fazer um erro alternativo e consertar sem duplicar
Proxybee

0

Deixe o DOM carregar. Para fazer algo no DOM, você deve carregá-lo primeiro. No seu caso, você deve carregar a <div>tag primeiro. então você tem algo para modificar. se você carregar o js primeiro, então essa função está procurando seu HTMLpara fazer o que você pediu, mas quando esse tempo você HTMLestá carregando e sua função não consegue encontrar o HTML. Portanto, você pode colocar o script no final da página. dentro da <body>tag, a função pode acessar o <div>porque o DOM já está carregado no momento em que você clica no script.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.