appendchild is not working

Asked

Viewed 3,290 times

0

I’m trying to pass the array elements with for( of ) to the html elements I created by js. The problem is that when I try to put the created in js inside, using appendchild, the error code.

That’s the 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();

That’s the 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>

Error occurred:

script.js:18 Uncaught Typeerror: Cannot read Property 'appendchild' of null at renderTodos (script.js:18) at script.js:22

javascript

  • What error message? I copied the code in Jsfiddle worked normally.

  • script.js:18 Uncaught Typeerror: Cannot read Property 'appendchild' of null at renderTodos (script.js:18) at script.js:22

  • Your script should be running before the DOM is ready, so the <ul> does not yet exist, put the script after the tag </body>.

1 answer

2


It is the order of your execution, you have to use or DOMContentLoaded or the attribute defer on the tag <script>, this because you are running the script before the elements in body have been downloaded or rendered.

Enjoy and read this:

Can use DOMContentLoaded to check if the DOM has already loaded:

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);

Or use defer for the script to be executed only after the DOM is ready:

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

Another way would be to just take the script out of the head and put it at the end of the body, like this:

<!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>

No need to use defer at the same time as DOMContentLoaded, although both have a small difference in the time/time they will perform, but still both will be after the DOM is accessible functions such as querySeletor, getElementById, etc.

  • Vlw, it worked. I’ll make this kind of mistake still too, I’m beginner.

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.