Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Francisco Marty
Francisco Marty
2,490 Points

Can't figure out why I am getting null when I getElementById here. Would really appreciate help.

So I am trying to select the div element with the id="roomList" and assign it an innerHTML value.

This is my JS code:

var roomList = document.getElementById('roomList'); roomList.innerHTML = '<li> test </li>';

When I get this I get this error on the console: 'Cannot set properties of null (setting 'innerHTML')'

When I type roomList into the console I get "null".

I can't figure out what I am doing wrong to prevent me from selecting the element. Is it possible that this could be a server side error from Treehouse? This is the full HTML:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>AJAX Office Status Widget</title> <link href='http://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> <script src="js/widget2.js"></script> </head> <body> <div class="grid-container centered"> <div class="grid-100"> <div class="contained"> <div class="grid-100"> <div class="heading"> <h1>Corporate Intranet</h1> </div> </div> <section class="grid-70 main"> <h2>Lorem Ipsum Headline</h2> <p>Blablabla</p> </section> <aside class="grid-30 list"> <h2>Meeting Rooms</h2> <div id="roomList">

      </div>
      <h2>Employee Office Status</h2>
      <div id="employeeList">

      </div>
    </aside>
    <footer class="grid-100">
      <p>Copyright, The Intranet Corporation</p>
    </footer>
  </div>
</div>

</div> </body> </html>

2 Answers

Steven Parker
Steven Parker
231,236 Points
Steven Parker
Steven Parker
231,236 Points

I agree with jb30 that the issue is running the script too soon. The conventional location for scripts (other than libraries) is to make them be the very last things in the <body> element.

Also, it's not proper HTML to have a list item ("li") as a direct child of a "div". List items should only be children of a list ("ul" or "ol").

And for future questions, use Markdown formatting to preserve posted code's appearance and retain special symbols. An even better way to share code and make your issue more likely to be replicated is to make a snapshot of your workspace and post the link to it here.

Francisco Marty
Francisco Marty
2,490 Points

Really appreciate it (especially reading my bad formatting): moving the script lower did it. Actually the script tag was placed high by default for the exercise I am doing... I am surprised that it was set up like this by default on Treehouse.

Also, it's not proper HTML to have a list item ("li") as a direct child of a "div". List items should only be children of a list ("ul" or "ol").

Yep, I was originally trying to add the ul element first, but I couldn't .appendChild() on it, so I was trying to isolate the issue.

jb30
jb30
44,806 Points
jb30
jb30
44,806 Points

The script tag is in the head section of the html. Have you tried moving it to after <div id="roomList"></div> or using window.onLoad to delay processing the javascript until after the page has loaded?