title: Unable to get forEach to properly work on IE
body: <p>I completed a active/disable feature in my code that works on both Chrome/Firefox really well but for some reason I am getting an error in IE when using forEach.</p>
  
  <p>Here is the error that is being displayed on IE:
  <a href="https://i.stack.imgur.com/GGVV8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GGVV8.png" alt=""></a></p>
  
  <p>On Chrome &amp; Firefox, the div's highlight the box and the correct box shows up below.
  <a href="https://i.stack.imgur.com/aN8Mb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aN8Mb.png" alt="enter image description here"></a></p>
  
  <p>Here is the code that I am using:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>"use strict";
  
  var tabButtons = document.querySelectorAll('.navlinksGP &gt; a');
  
  function enableTabButton(buttonId) {
  tabButtons.forEach(function(btn) {
  if (btn.id === buttonId) {
    btn.disabled = true;
    btn.style.background = '#eeaf00';
      btn.style.color = '#ffffff';
  } else {
    btn.disabled = false;
    btn.style.background = '#ffffff';
      btn.style.color = '#eeaf00';
  }
  });
  }
      enableTabButton('word');
  
  var player = document.getElementById('player');
  
  function wButton(element) {
    enableTabButton(element);
    if (element === "word") {
      player.innerHTML = "&lt;h1 id=\"h1update\"&gt;Brand &amp; Consumer Marketing&lt;/h1&gt;";
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="navlinksGP"&gt;
     &lt;a id="word" onclick="wButton(this.id); window.location='#container'" href="#"&gt;BRAND &amp; CONSUMER MARKETING&lt;/a&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The only issue I have on IE is that the function enableTabButton is not working at all.</p>