title: External Javascript Undefined only on Internet Explorer
body: <p>I have a simple webpage with an external javascript call to help navigate through images in the page. The webpage works perfectly fine on chrome but I am getting an undefined error on Internet Explorer. It seems like IE is unable to find the javascript for some reason.</p>
  
  <p>Here is my html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html height="100%" lang="en" dir="ltr"&gt;
  &lt;head&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"&gt;
    &lt;link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.0/css/all.css" integrity="sha384-Mmxa0mLqhmOeaE8vgOSbKacftZcsNYDjQzuCOm6D02luYSzBG8vpaOykv9lFQ51Y" crossorigin="anonymous"&gt;
    &lt;script type="text/javascript" src="http://fullpath.com/Scripts/toggle_images.js"&gt;&lt;/script&gt;
    &lt;meta charset="utf-8"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div class="navigation-bar"&gt;
      &lt;button class="btn btn-light nav-button" onclick="toggle_images('left')"&gt;
        &lt;i class="fas fa-caret-left"&gt;&lt;/i&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="center-container"&gt;
      &lt;div class="image-container"&gt;
        &lt;img src="http://fullpath.com/Main/img1.png" id="simulatorImageTopLeft"&gt;&lt;/img&gt;
      &lt;/div&gt;
      &lt;div class="image-container"&gt;
        &lt;img src="http://fullpath.com/Main/img2.png" id="simulatorImageTopRight"&gt;&lt;/img&gt;
      &lt;/div&gt;
      &lt;div class="image-container"&gt;
        &lt;img src="http://fullpath.com/Main/img3.png" id="simulatorImageBottomLeft"&gt;&lt;/img&gt;
      &lt;/div&gt;
      &lt;div class="image-container"&gt;
        &lt;img src="http://fullpath.com/Main/animation_left.gif" id="simulatorImageBottomRight"&gt;&lt;/img&gt;
        &lt;img src="http://fullpath.com/Main/animation_right.gif" id="simulatorImageBottomRight"&gt;&lt;/img&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="navigation-bar"&gt;
      &lt;button class="btn btn-light nav-button" onclick="toggle_images('right');"&gt;
        &lt;i class="fas fa-caret-right"&gt;&lt;/i&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And here is the javascript:</p>
  
  <pre><code>var imageIterator = 0;
  
  function toggle_images(direction='none') {
    var IMAGE_SET = [
      ['img1.png','img2.png','img3.png'],
      ['img4.png','img5.png','img6.png'],
    ];
    var IMAGE_PATH = 'http:/fullpath.com/Main/'
    if (direction == 'right') {
      imageIterator = Math.abs(imageIterator + 1) % 4;
    } else if (direction == 'left') {
      imageIterator = Math.abs(3 + imageIterator) % 4;
    }
  
    var IMAGE = document.getElementById("reactor-nav-box").textContent;
    document.getElementById("simulatorImageTopRight").src=IMAGE_PATH + IMAGE + '/'+ IMAGE_SET[imageIterator][1];
    document.getElementById("simulatorImageTopLeft").src=IMAGE_PATH + IMAGE + '/'+ IMAGE_SET[imageIterator][0];
    document.getElementById("simulatorImageBottomLeft").src=IMAGE_PATH + IMAGE + '/'+ IMAGE_SET[imageIterator][2];
  }
  </code></pre>