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: /

Working alert demo here: /

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>

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/shhv1Lx3/2/

Working alert demo here: http://fiddle.jshell/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>

• javascript
• html
• css

• 1 does the alert work? – Caspar Wylie Commented Sep 7, 2016 at 16:32
• 1 no brackets in that if statement – VLAZ Commented Sep 7, 2016 at 16:32
• 2 You need {} brackets on multiline ifs – TankorSmash Commented Sep 7, 2016 at 16:39
• Overall, two (or three) problems that would have been pletely 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 ifs, it also plains 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 Commented Sep 7, 2016 at 16:41
• @TankorSmash Thank you :-) – michaelmcgurk Commented Sep 7, 2016 at 16:43

5 Answers 5

You could easily acplish this (IE vs. not IE) without Javascript using conditional IE ments

<!--[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 ments will not work. Read more here

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>

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?

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';
   }

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);
}