I'm working on a flexible menu, that does not need to jump from page to page when clicking 'links'. The JavaScript I use for that is as follows:

var inbox = document.getElementById("u-content-inbox");
var friends = document.getElementById("u-content-friends");
var agenda = document.getElementById("u-content-agenda");
var list = document.getElementById("u-content-list");
var news = document.getElementById("u-content-news");
var notes = document.getElementById("u-content-notes");

function Inbox() {
  inbox.style.visibility='visible';
}

function Friends() {
  friends.style.visibility='visible';
}

function Agenda() {
  agenda.style.visibility='visible';
}

function List() {
  list.style.visibility='visible';
}

function News() {
  news.style.visibility='visible';
}

function Notes() {
  notes.style.visibility='visible';
}

The div elements are like this:

<div id="u-content-inbox" style="visibility:hidden;">
  Inbox
</div>

<div id="u-content-friends" style="visibility:hidden;">
  Friends
</div>

Each div has a "u-content-x". However, when I try to change the style attribute "visibility" to visible. It gives me the following error: Uncaught TypeError: Cannot read property 'style' of null

I'm not seeing what I'm doing wrong. Could somebody please bring clearance to me why exactly JavaScript, or rather, I fail to make it work? Whenever I run a check on

if(!inbox) {
alert("Inbox div has not been found);
}

does not show the alert message.

I'm working on a flexible menu, that does not need to jump from page to page when clicking 'links'. The JavaScript I use for that is as follows:

var inbox = document.getElementById("u-content-inbox");
var friends = document.getElementById("u-content-friends");
var agenda = document.getElementById("u-content-agenda");
var list = document.getElementById("u-content-list");
var news = document.getElementById("u-content-news");
var notes = document.getElementById("u-content-notes");

function Inbox() {
  inbox.style.visibility='visible';
}

function Friends() {
  friends.style.visibility='visible';
}

function Agenda() {
  agenda.style.visibility='visible';
}

function List() {
  list.style.visibility='visible';
}

function News() {
  news.style.visibility='visible';
}

function Notes() {
  notes.style.visibility='visible';
}

The div elements are like this:

<div id="u-content-inbox" style="visibility:hidden;">
  Inbox
</div>

<div id="u-content-friends" style="visibility:hidden;">
  Friends
</div>

Each div has a "u-content-x". However, when I try to change the style attribute "visibility" to visible. It gives me the following error: Uncaught TypeError: Cannot read property 'style' of null

I'm not seeing what I'm doing wrong. Could somebody please bring clearance to me why exactly JavaScript, or rather, I fail to make it work? Whenever I run a check on

if(!inbox) {
alert("Inbox div has not been found);
}

does not show the alert message.

• javascript
• html
• css
• styles

Share Improve this question Follow edited Feb 1, 2015 at 22:03 Deduplicator 45.8k77 gold badges7272 silver badges123123 bronze badges asked Jan 19, 2014 at 22:36 Jesse DijkstraJesse Dijkstra 13011 silver badge88 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

Make sure you call your javascript after the document is loaded! I'm nearly certain you are trying to get element references before they exist in the dom. The best practices is to put all scripts just before the closing of the body tag.

  <script src="some/path/to/file.js"></script>
</body>

If your scripts appear in the document before the elements do, you can put your code inside of this load event function:

window.addEventListener('load', function() {
 //your code here
});

Just as a note on your code architecture, you could attach a class to each element and then do this:

var toMakeVisible = document.getElementsByClassName('some-class');
for (var i=0; i<toMakeVisible; ++i) {
  var elem = toMakeVisible[i];
  elem.style.visibility = 'visible';
}