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>
javascript onload innerhtml Joshua W
fonte

Respostas:

176

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

Erik Godard
fonte
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>
Expandir snippet

  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>
Expandir snippet

RBT
fonte
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>
Colyn1337
fonte
11

Basta colocar o seu JS em window.onload

window.onload = function() {

        what();

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

    }
RIYAJ KHAN
fonte
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>
Expandir snippet

user5323957
fonte
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.

JT Nolan
fonte
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>
Expandir snippet

user6175882
fonte
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>
Expandir snippet


fonte
3

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

Eddy
fonte
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>
Pines Tran
fonte
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>
Expandir snippet

user2114253
fonte
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ê.

praga de praga
fonte
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.

Marko Slijepčević
fonte
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 :)

abe312
fonte
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.

user6175882
fonte
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.

Shubham
fonte
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';  
});
Shrey Tripathi
fonte
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

Proxybee
fonte
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.

HeshanHH
fonte