0

Estou tentando passar os elementos do array com for( of ) para os elementos de html que eu criei pelo js. O problema é q quando tento colocar o criado no js dentro do, usando appendChild,o código da erro.

Esse é o javascript:

var listElement = document.querySelector('#app ul');
var inputElement = document.querySelector('#app input');
var buttonElement = document.querySelector('#app button');

var todos = [
    'Fazer café',
    'Estudar Javascript',
    'Lavar a Louça'
];

function renderTodos(){

for(todo of todos){
    var todoElement = document.createElement('li');
    var todoText = document.createTextNode(todo);

    todoElement.appendChild(todoText);
    listElement.appendChild(todoElement);
   }
}

renderTodos();

Esse é o html;

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content Language" content="pt-br">
<title>Parte 3</title>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
    <div id="app">
        <ul>    

       </ul>
       <input type="text" placeholder="Digite um To do">
       <button>Adicionar</button>
   </div>
</body>
</html>

Erro ocorrido:

script.js:18 Uncaught TypeError: Cannot read property 'appendChild' of null at renderTodos (script.js:18) at script.js:22

3
  • Qual a mensagem de erro? Copiei o código no JSFiddle funcionou normalmente. 19/07/2018 às 18:38
  • script.js:18 Uncaught TypeError: Cannot read property 'appendChild' of null at renderTodos (script.js:18) at script.js:22 19/07/2018 às 18:42
  • Seu script deve estar rodando antes do DOM estar pronto, então a <ul> ainda não existe, coloque o script depois da tag </body>. 19/07/2018 às 20:35

1 Resposta 1

2

É a ordem da sua execução, você tem que usar ou DOMContentLoaded ou o atributo defer na tag <script>, isto porque você esta executando o script antes dos elementos no body terem sido baixados ou renderizados.

Aproveite e leia isto:

Pode usar DOMContentLoaded para checar se o DOM já carregou:

var listElement = document.querySelector('#app ul');
var inputElement = document.querySelector('#app input');
var buttonElement = document.querySelector('#app button');

var todos = [
    'Fazer café',
    'Estudar Javascript',
    'Lavar a Louça'
];

function renderTodos(){

for(todo of todos){
    var todoElement = document.createElement('li');
    var todoText = document.createTextNode(todo);

    todoElement.appendChild(todoText);
    listElement.appendChild(todoElement);
   }
}

document.addEventListener("DOMContentLoaded", renderTodos);

Ou usar defer para que o script seja executado somente após o DOM estar pronto:

<script type="text/javascript" src="script.js" defer></script>

Outra maneira seria simplesmente tirar o script do head e colocar no final do body, assim:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content Language" content="pt-br">
<title>Parte 3</title>
</head>
<body>
    <div id="app">
        <ul>    

       </ul>
       <input type="text" placeholder="Digite um To do">
       <button>Adicionar</button>
   </div>
   <script type="text/javascript" src="script.js"></script>
</body>
</html>

Não é necessário usar defer ao mesmo tempo que DOMContentLoaded, apesar que ambos tem uma pequena diferença na hora/tempo que irão executar, mas ainda sim ambos serão após o DOM estar acessivel as funções como querySeletor, getElementById, etc

1
  • Vlw, funcionou. Vou cometer muito ainda esse tipo de erro, sou iniciante. 19/07/2018 às 18:55

Você deve fazer log-in para responder a esta pergunta.

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