Hide/Show element if IE - Javascript

Question

I am working with a script that pops up an alert if the user is or isn't using IE.

Instead of this, I'd like to show or hide a div element in my page.

I have tried unsuccessfully here: http://fiddle.jshell.net/shhv1Lx3/2/

Working alert demo here: http://fiddle.jshell.net/shhv1Lx3/3/

function GetIEVersion() {
  var sAgent = window.navigator.userAgent;
  var Idx = sAgent.indexOf("MSIE");

  // If IE, return version number.
  if (Idx > 0) 
    return parseInt(sAgent.substring(Idx+ 5, sAgent.indexOf(".", Idx)));

  // If IE 11 then look for Updated user agent string.
  else if (!!navigator.userAgent.match(/Trident\/7\./)) 
    return 11;

  else
    return 0; //It is not IE
}

var e = document.getElementById(ie);
var e2 = document.getElementById(chrome);

if (GetIEVersion() > 0) 
   alert("This is IE " + GetIEVersion());
   e.style.display = 'block';
   e2.style.display = 'none';
else 
   alert("This is not IE.");
   e.style.display = 'none';
   e2.style.display = 'block';

<div id="ie">
ie
</div>

<div id="chrome">
chrome
</div>

Overall, two (or three) problems that would have been completely avoided using the most basic of looking at the console. It reported (correctly) that the `else` statement is wrong because it didn't match any `if`s, it also complains about `e` being `null` and if that error was fixed, it would thrown the same error about `e2` as well. We see these sorts of rookie mistakes dozens of times a day here at SO but usually from...well, rookies. I'd have thought that a member of 5 years over 2k rep would 1. have the basic skills to avoid them 2. not run over to SO to ask for debugging help. — VLAZ, Sep 07 '16 at 16:41

Rob M. · Answer 1 · 2016-09-07T16:57:27.690

4

You could easily accomplish this (IE vs. not IE) without Javascript using conditional IE comments

<!--[if IE ]>
  <style>
    #chrome { display: none; }
  </style>

  <div id="ie">
    ie
  </div>
<![endif]-->
<div id="chrome">
  chrome
</div>

Note This will only work for IE9 and below - if you are using standards or quirks mode in IE10 or above conditional comments will not work. Read more here

edited Sep 07 '16 at 16:57

answered Sep 07 '16 at 16:34

Rob M.

30,427
6
46
42

That's a very clean approach - I like it! – michaelmcgurk Sep 07 '16 at 16:40
2

Though conditional comments are [not supported](https://msdn.microsoft.com/en-us/library/hh801214(v=vs.85).aspx) in IE10 and later. – Teemu Sep 07 '16 at 16:53
@Teemu in standards and quirks mode (which most people would probably opt for - just wanted to clarify a bit). Thanks for the comment though, will update my answer – Rob M. Sep 07 '16 at 16:56

Rocket Hazmat · Accepted Answer · 2016-09-07T16:35:29.277

3

You should use {} when using if/else statements. The are optional when there is only one statement, but mandatory when there are multiple statements. I highly suggest using {} always, regardless of the number of statements.

You also need to pass a string to getElementById().

function GetIEVersion() {
  var sAgent = window.navigator.userAgent;
  var Idx = sAgent.indexOf("MSIE");

  // If IE, return version number.
  if (Idx > 0){
    return parseInt(sAgent.substring(Idx+ 5, sAgent.indexOf(".", Idx)));
  }
  // If IE 11 then look for Updated user agent string.
  else if (!!navigator.userAgent.match(/Trident\/7\./)){
    return 11;
  }
  else{
    return 0; //It is not IE
  }
}

var e = document.getElementById('ie');
var e2 = document.getElementById('chrome');

if (GetIEVersion() > 0){
   alert("This is IE " + GetIEVersion());
   e.style.display = 'block';
   e2.style.display = 'none';
}
else{
   alert("This is not IE.");
   e.style.display = 'none';
   e2.style.display = 'block';
}

<div id="ie">
ie
</div>

<div id="chrome">
chrome
</div>

edited Sep 07 '16 at 16:35

answered Sep 07 '16 at 16:33

Rocket Hazmat

204,503
39
283
323

Thanks for your answer. I have made this updates here: http://fiddle.jshell.net/shhv1Lx3/4/ but it still seems to be displaying both divs :( – michaelmcgurk Sep 07 '16 at 16:34
Rocket by name, Rocket by nature - what speed! :-D Thank you – michaelmcgurk Sep 07 '16 at 16:35
1

@michaelmcgurk: Check your `getElementById()` lines. You need to pass them *strings*. – Rocket Hazmat Sep 07 '16 at 16:35
2

@michaelmcgurk check the JavaScript console and the reason becomes clear `TypeError: e is null`. – VLAZ Sep 07 '16 at 16:36
2

As the `.indexOf()` method is not supported in all IE versions, I recommend using the `.match()` method instead. – Alexander Dixon Sep 07 '16 at 18:43

score 3 · Answer 3 · edited May 23 '17 at 10:34

3

When you have multiple statements in an if or else, you need to wrap them in curly braces.

if (GetIEVersion() > 0) {
   alert("This is IE " + GetIEVersion());
   e.style.display = 'block';
   e2.style.display = 'none';
} else {
   alert("This is not IE.");
   e.style.display = 'none';
   e2.style.display = 'block';
}

Why is it considered a bad practice to omit curly braces?

edited May 23 '17 at 10:34

Community

1
1

answered Sep 07 '16 at 16:34

Barmar

596,455
48
393
495

1

Unbelievable. This is common syntax in most programming languages. Are you normally a Python programmer? It's the only common language that uses indentation instead of brackets. – Barmar Sep 07 '16 at 16:36
@Barmar: Or he could just use used to the syntactic sugar of being able to omit them for single lines inside `if`/`else`. – Rocket Hazmat Sep 07 '16 at 16:37

score 1 · Answer 4 · answered Sep 07 '16 at 16:35

Seems like syntax errors

if (GetIEVersion() > 0)  {
   alert("This is IE " + GetIEVersion());
   e.style.display = 'block';
   e2.style.display = 'none';
   }
else { 
   alert("This is not IE.");
   e.style.display = 'none';
   e2.style.display = 'block';
   }

score 1 · Answer 5 · edited May 23 '17 at 12:18

I've had great success with the following code snippet from this Stack Overflow answer to detect Chrome:

I have tested and it works just fine for Internet Explorer.

It avoids the .indexOf() methodology which I prefer. You would simply replace the search parameter in the regex with MSIE

var detectID = (function() {
  var ua = navigator.userAgent,
    tem,
    M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
  if (/trident/i.test(M[1])) {
    tem = /\brv[ :]+(\d+)/g.exec(ua) || [];
    return 'IE ' + (tem[1] || '');
  }
  if (M[1] === 'Chrome') {
    tem = ua.match(/\b(OPR|Edge)\/(\d+)/);
    if (tem != null) return tem.slice(1).join(' ').replace('OPR', 'Opera');
  }
  M = M[2] ? [M[1], M[2]] : [navigator.appName, navigator.appVersion, '-?'];
  if ((tem = ua.match(/version\/(\d+)/i)) != null) M.splice(1, 1, tem[1]);
  return M.join(' ');
})();

if (detectID.match("IE") || detectID.match("MSIE") ) {
  console.log("IE Browser Detected: " + detectID);
} else {
  console.log("Not IE: " + detectID);
}

Many thanks, Alexander for taking the time to reply with this detailed response - greatly appreciated :-) — michaelmcgurk, Sep 07 '16 at 19:14

Hide/Show element if IE - Javascript

5 Answers5