CODEWITHSUNDEEP
javascripthtml
Glorious15
Glorious15

Reputation: 27

I am getting "cannot set property 'innerHTML' of null

I am getting this error. I am trying to output names present in the array on the html document but I am not able to do it. I tried placing script tag below body but still not working.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1> Callback Function</h1> 

    <ul class"people"> </ul>
<script type="text/javascript" src="callme.js">

</script>
</body>
</html>

// get a reference to the 'ul'
const ul = document.querySelector('.people');

//I am trying to read the people on to the html code
const people = ['mario', 'luigi', 'ryu', 'shaun', 'chun-li'];
let html = ` `;
people.forEach(function(person){
  html += `<li> style="color: purple">${person}</li>`;
});


console.log("hellow");
ul.innerHTML = html;

Upvotes: 2

Views: 58

Answers (2)

Durgesh
Durgesh

Reputation: 33

small error in html, js markup added correct one below, your list will print correct.

// get a reference to the 'ul'
const ul = document.querySelector('.people');

//I am trying to read the people on to the html code
const people = ['mario', 'luigi', 'ryu', 'shaun', 'chun-li'];
let html = ` `;
people.forEach(function(person){
  html += `<li style="color: purple">${person}</li>`;
});


console.log("hellow");
ul.innerHTML = html;
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1> Callback Function</h1> 

    <ul class="people"> </ul>
<script type="text/javascript" src="callme.js">

</script>
</body>
</html>

Upvotes: 0

Justin Feakes
Justin Feakes

Reputation: 400

There's an error in your HTML. Try this: 

<ul class="people"> </ul>

There was an = sign missing between class and "people".

Upvotes: 6

Related Questions