JS error message textContent set as null [duplicate]

Question

I am fairly new to JS and the world of web development, so apologise in advance if my question is a bit tedious.

I wrote this code:

var breakfast = new Object();
breakfast.food = "croissant";
breakfast.extra = ["mushroom", "cheese"];
breakfast.eat = function(){return this.food + " with " +  this.extra[0];}
var elBreakfast = document.getElementById("breakf");
elBreakfast.textContent = breakfast.eat();

I get an error message from the browser:

"Uncaught TypeError: Cannot set property 'textContent' of null"... 

What have I done wrong?

Thanks!

Answer 1

The only important code here is document.getElementById("breakf");. It seems like your browser is unable to query for the element with an ID of breakf within your HTML markup.

So you need to check your HTML code live in your browser. Check if there is any HTML node with id=breakf. If not, you correctly should receive that error.

Answer 2

Try to add script reference end of body tag in html page so that it will load breakf element and then applies the breakfast.eat();

Answer 3

The error is coming from document.getElementById("breakf") here. The browser can't seem to find a node with an id of breakf.

Check your html code for a node with id="breakf", if it's not there, add it to the node you want to write text in and it should be good.