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 JavaScript Loops, Arrays and Objects Tracking Data Using Objects The Student Record Search Challenge Solution

Sandra Vu
Sandra Vu
3,525 Points
Posted by Sandra Vu
Sandra Vu
3,525 Points

Uncaught Type Error: cant set innerHTML of null?

I am experimenting with filter method to search for the specific object in the array of students. I tested the code below in console and keep getting this error when assigning outputDiv to message (outputDiv.innerHTML= message):

Uncaught Type Error: cant set innerHTML of null

A common solution from StackOverflow is to place the script tag just right before </body>/. I have already done this and still get the error.

Could you figure out why?

var message = ' ';
var student;
var search;

function print(message) {
  var outputDiv = document.getElementById('output');
  outputDiv.innerHTML = message;
}

function getStudentReport( student ) {
  var report = '<h2>Student: ' + student.name + '</h2>';
  report += '<p>Track: ' + student.track + '</p>';
  report += '<p>Points: ' + student.points + '</p>';
  report += '<p>Achievements: ' + student.achievements + '</p>';
  return report;
}

while (true) {
  search = prompt('Search student records: type a name [Jody] (or type "quit" to end)');
  if (search === null || search.toLowerCase() === 'quit') {
    break;
  };

  student = students.filter(function (student) {
      return student.name === search;
    })[0];
  message = getStudentReport(student);
  print(message)
}

4 Answers

Simon Coates
Simon Coates
28,694 Points
Simon Coates
Simon Coates
28,694 Points

May need to see your HTML as well. If your code is running after the HTML is loaded, then something else is wrong with the code that retrieves a DOM element for outputDiv. demo:

<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="output"></div>
<script>
function print(message) {
  var outputDiv = document.getElementById('output');
  outputDiv.innerHTML = message;
}
print("some message");
</script>
</body>
</html>

The above works fine, but if i change the id of the output div, then the print method is unable to find an element (is empty or 'null'). You can't set a property of something that doesn't exist.

Sandra Vu
Sandra Vu
3,525 Points
Sandra Vu
Sandra Vu
3,525 Points

dear Simon. This is my HTML code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Students</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
<h1>Students</h1>
<div id="output">

</div>
<script src="js/students.js"></script>
<script src="js/students_report.js"></script>
</body>
</html>
Simon Coates
Simon Coates
28,694 Points
Simon Coates
Simon Coates
28,694 Points

i'll try and work it out

Simon Coates
Simon Coates
28,694 Points
Simon Coates
Simon Coates
28,694 Points

Not sure if this is the same error, but i think you need to check to make sure a student was found. The following is what i came up with. It seems to work fine in IE, but in chrome doesn't update the DOM immediately. In any event, i don't get any errors/exceptions and i tested most obvious test cases.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Students</title>
</head>
<body>
<h1>Students</h1>
<div id="output">
</div>

<script>

var students = [{
    name: "steve",
    track: "javascript or something",
    points: "6000000000",
    achievements: "some impressive stuff"
}, {
    name: "Rebecca",
    track: "android or something",
    points: "6000000001",
    achievements: "other impressive stuff"
}];

var message = ' ';
var student;
var search;

function print(message) {
  var outputDiv = document.getElementById('output');
  outputDiv.innerHTML = message;
}

function getStudentReport( student ) {
  var report = '<h2>Student: ' + student.name + '</h2>'; //WILL HAVE ISSUES STUDENT IS UNDEFINED/NULL
  report += '<p>Track: ' + student.track + '</p>';
  report += '<p>Points: ' + student.points + '</p>';
  report += '<p>Achievements: ' + student.achievements + '</p>';
  return report;
}

while (true) {
  search = prompt('Search student records: type a name [Jody] (or type "quit" to end)');
  if (search === null || search.toLowerCase() === 'quit') {
    break;
  };
  student = students.filter(function (student) {
      return student.name === search;
    })[0];

  if(student != null){
      message = getStudentReport(student);
      print(message);
  } else {
      //student is undefined
      print("No result.");
  }
}
</script>
</body>
</html>

Testing that the student variable contains an object, means that the getStudentReport method won't be called on a null - which results in an exception.

Sandra Vu
Sandra Vu
3,525 Points
Sandra Vu
Sandra Vu
3,525 Points

Thanks Simon for your help

I was able to fix it by check whether message exists first before assigning it to outputDiv.innerHTML

function print(message) {
  var outputDiv = document.getElementById('output');
  if (message || message === 0) outputDiv.innerHTML = message;
}

You have a nice weekend :D

Simon Coates
Simon Coates
28,694 Points
Simon Coates
Simon Coates
28,694 Points

ok, glad you were able to get your code working.