classList.toggle("show") not working in IE11

Question

I've created a website which works exactly how it should in Chrome, but it does not working in IE11. When a button is pressed a popup should appear above the button with text from the HTML (this work perfectly in Chrome)

When running on IE11 I get this error:

SCRIPT5007: Unable to get property 'toggle' of undefined or null reference

script.js (3,3)

This points torwards my js file (called script.js):

function myFunction(data) {
  var popup = document.getElementById("myPopup"+data);
  popup.classList.toggle("show");
}

The error appears when I click the button to view the popup, the function get called only when I press the button.

Is there a way to get this to work in IE11 as well as Chrome?

See below for snippet on how the popup should work in IE11.

function myFunction(data) {
  var popup = document.getElementById("myPopup" + data);
  popup.classList.toggle("show");
}

/* Popup container */

.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  width: 100%;
  padding-top: 15px;
  padding-bottom: 15px;
  background: white;
  border: none;
  font-size: 25px;
}

.popup:hover {
  background-color: #008CBA;
  color: white;
}


/* The actual popup (appears on top) */

.popup .popuptext {
  visibility: hidden;
  width: 250px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 110%;
  left: 30%;
  margin-left: -80px;
  font-size: 16px;
}


/* Popup arrow */

.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}


/* Toggle this class when clicking on the popup container (hide and show the popup) */

.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  -moz-animation: fadeIn 1s;
  -ms-animation: fadeIn 1s;
  animation: fadeIn 1s;
}


/* Add animation (fade in the popup) */

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

<!DOCTYPE html>
<html>

<head>
  <link href="style.css" rel="stylesheet">
  <script type="text/javascript" src="script.js"></script>
</head>

<body>
  <table>
    <tr>
      <th colspan="4">Test Buttons</th>
    </tr>
    <tr>
      <td><button class="popup" onclick="myFunction(1)">1<span class="popuptext" id="myPopup1">Test Button 1</span></button></td>
      <td><button class="popup" onclick="myFunction(2)">2<span class="popuptext" id="myPopup2">Test Button 2</span></button></td>
      <td><button class="popup" onclick="myFunction(3)">3<span class="popuptext" id="myPopup3">Test Button 3</span></button></td>
      <td><button class="popup" onclick="myFunction(4)">4<span class="popuptext" id="myPopup4">Test Button 4</span></button></td>
    </tr>
  </table>
</body>

</html>

Can you post a [MCVE]? I thought that IE10+ [supported](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList#Browser_compatibility) `classList` (to a limited extent) if MDN's tables are right — CertainPerformance, Feb 06 '19 at 08:53
Thanks, though on my IE11 (11.253.17763.0), I'm not seeing an error. The class looks to be added properly, but the animation / `.popuptext` appearance doesn't seem to happen, probably due to an IE CSS issue. — CertainPerformance, Feb 06 '19 at 09:03
same here on version 11.523.17134.0, no error and class added properly — Kaddath, Feb 06 '19 at 09:05
Im using version 11.253.17763.0, i'm seeing the error in the console. The more I look around the more I see that classList is supported 9+ — JackU, Feb 06 '19 at 09:14
@CertainPerformance Just seen the link you posted for support. IE has no support for `toggle` is there something else i can use instead to achieve the same thing? — JackU, Feb 06 '19 at 09:15
Check the description again: it says `toggle() method's second argument` is not supported, but it does have basic support (as it appears in my version of IE11) — CertainPerformance, Feb 06 '19 at 09:17
@CertainPerformance Does the popup text appear at all on your IE? I'm not too concerned if there is no animation. When I run the snippet on IE, I get no popup. — JackU, Feb 06 '19 at 09:23
do you still have the console error with the current snippet? if you still have it in your code and not in the snippet, try to edit the snippet as to reproduce the error here. To answer your last comment, the class is properly toggled but the popup doesn't appear — Kaddath, Feb 06 '19 at 10:28

score 0 · Accepted Answer · answered Feb 07 '19 at 07:08

Try to make a test with code below may help you to solve your issue.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Popup container - can be anything you want */
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* The actual popup */
.popup .popuptext {
  visibility: hidden;
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Toggle this class - hide and show the popup */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}
table, th, td {
  border: 1px solid black;
}
</style>
</head>
<body>

<h2>Test</h2>
<table>
<tr>
<td>
<div class="popup" onclick="myFunction(1)"><h2>1</h2>
  <span class="popuptext" id="myPopup1">Popup 1</span>
</div>
</td>
<td>
<div class="popup" onclick="myFunction(2)"><h2>2</h2>
  <span class="popuptext" id="myPopup2">Popup 2</span>
</div>
</td>
<td>
<div class="popup" onclick="myFunction(3)"><h2>3</h2>
  <span class="popuptext" id="myPopup3">Popup 3</span>
</div>
</td>
<td>
<div class="popup" onclick="myFunction(4)"><h2>4</h2>
  <span class="popuptext" id="myPopup4">Popup 4</span>
</div>
</td>
</tr>
</table>
<script>

function myFunction(data) {
  var txt= "myPopup" + data;
  var popup = document.getElementById(txt);
  popup.classList.toggle("show");
}

</script>

</body>
</html>

Output in IE 11:

Further, You can try to modify the code based on your requirement.

classList.toggle("show") not working in IE11

1 Answers1