getElementByID Not Working in IE

Question

I'm currently having a problem with a script that calls getElementByID in Internet Explorer 11 (and presumably older versions). It works fine in Edge, Chrome, FF, etc. But in IE, the divs don't appear and in the console I get the error:

SCRIPT5007: Unable to set property 'visibility' of undefined or null reference

Essentially, there are four hidden divs and the script reveals each one in turn with a few seconds gap between them.

The function is called by the body tag:

<body onload="displayBlocks()">

Html for the divs is:

Some Text

  <div id="text_box_2" class="tb">
    Some Text
  </div>

  <div id="text_box_3" class="tb">
    Some Text
  </div>

  <div id="text_box_4" class="tb">
    Some Text
  </div>

And the script is:

i = 0;

function displayBlocks() {
  if (i < 4) {
    alert
    setTimeout(function() {
      showBlock(i);
    }, 3000);
  }
}

function showBlock(blockN) {
  if (blockN == 0) {
    item = document.getElementById("text_box_1");
    item.style.visibility = "visible";

  }

  if (blockN == 1) {
    item = document.getElementById("text_box_2");
    item.style.visibility = "visible";
  }

  if (blockN == 2) {
    item = document.getElementById("text_box_3");
    item.style.visibility = "visible";
  }

  if (blockN == 3) {
    item = document.getElementById("text_box_4");
    item.style.visibility = "visible";
  }

  i++;
  displayBlocks();

}
}

Any ideas on why this is happening would be much appreciated.

I suggest reading up on `var`. You're not using it even once, and that is the source of your problem. — JLRishe, Nov 20 '17 at 12:46

score 0 · Answer 1 · answered Nov 20 '17 at 12:32

0

You have an extra } on the end of your code, also you wrote alert but didn't give it any parameters or call it.

answered Nov 20 '17 at 12:32

Lilith

437
2
11

All browsers would throw a syntax error if this was the problem. – Andreas Nov 20 '17 at 12:37
Sorry, alert was a hangover from some testing and the extra } is because on the full page code the script is enclosed in an additional function that checks screen size, I did a bad copy and paste job :) – mrtheduke Nov 20 '17 at 13:24

Pete · Accepted Answer · 2017-11-20T12:51:29.723

You need to change the name of your item variable - it is a reserved variable for IE

var i = 0;

function displayBlocks() {
  if (i < 4) {
    setTimeout(function() {
      showBlock(i);
    }, 3000);
  }
}

function showBlock(blockN) {
  if (blockN == 0) {
    console.log(item);
    var item1 = document.getElementById("text_box_1");
    item1.style.visibility = "visible";
  }

  if (blockN == 1) {
    var item1 = document.getElementById("text_box_2");
    item1.style.visibility = "visible";
  }

  if (blockN == 2) {
    var item1 = document.getElementById("text_box_3");
    item1.style.visibility = "visible";
  }

  if (blockN == 3) {
    var item1 = document.getElementById("text_box_4");
    item1.style.visibility = "visible";
  }

  i++;
  displayBlocks();
}

displayBlocks();

.tb {
  visibility: hidden;
}

<div id="text_box_1" class="tb">
  Some Text 1
</div>

<div id="text_box_2" class="tb">
  Some Text 2
</div>

<div id="text_box_3" class="tb">
  Some Text 3
</div>

<div id="text_box_4" class="tb">
  Some Text 4
</div>

If you run the above snippet, you will see it crashes in every browser but IE due to the console.log(item)

As @JLRishe points out, you can make your item local to the if if you declare it as a var - you seem not to declare any of your variables (you should start to otherwise they are all global and you will run into more of these type of problems)

OP doesn't need to rename their variable. They just need to use `var`. — JLRishe, Nov 20 '17 at 12:47

getElementByID Not Working in IE

2 Answers2