Javascript / css not working in Internet Explorer

I'm testing my site on Internet Explorer via browser testing site(e.g. Lambda Test) - and it's not working at all. Nothing happens, no movement. What's going on here and how do I fix this? I've tested this on both IE 11 and IE 9.

From this article: How to enable JavaScript in Windows

It looks like sometimes you have to manually enable javascript, and I'm assuming that sites like lambda test have this enabled already. I use Mac, so I can't actually use IE.

Update - CSS:

 img
{
  display:none;
  height: 400px;
}


 img.invisible
{
  visibility: hidden;
}

img.show
{
  display:inline;
}

img.anim1
{
  animation-duration: 2000ms;
}

 img.anim2
{
  animation-duration: 2000ms;
}

img.anim3
{
  animation-duration: 2000ms;
}


.fadeIn
{
  animation-name: fadeIn;
}

@keyframes fadeIn 
{
 0% {opacity: 0;}
 100% {opacity: 1;}
}


@-ms-keyframes fadeIn 
{
 0% {opacity: 0;}
 100% {opacity: 1;}
}

.fadeOut
{
  animation-name: fadeOut;
}

@-ms-keyframes fadeOut 
{
 0% {opacity: 1;}
 100% {opacity: 0; display:none;}
}

    
    <section class="conA">
    <div id="container">
      <div id="heroText">
         <p>Lorem ipsum</p>
        <div id="text"></div>
      </div>
      <div id="images"></div>
    </div>
    </section>
    
    
    
    <script type="text/javascript">
    
    var _CONTENT = [ "lorem ipsum", "example sentence"
    , "example 2", "example 3" ];
    
    
    var IMAGE_URLS = ['img/image2.png', 'img/image1.png', 'img/image3.png', 'img/image1.png','img/image2.png','img/image3.png', 'img/image4.png','img/image5.png','img/image6.png','https://www.gravatar.com/avatar/a235706e3d81b614acaec3368edfea4b?s=96&d=identicon&r=PG','https://i.sstatic.net/qxeUf.jpg?s=96&g=1','https://i.sstatic.net/4xczZ.jpg?s=96&g=1'];
    
    var IMAGES = IMAGE_URLS.map((url, index) =>
    {
      var img = document.createElement('img');
      img.setAttribute('src', url);
      img.classList.add('anim'+((index%3)+1));
      img.classList.add('fadeOut');
      document.getElementById('images').appendChild(img);
      return img;
    });
    
    var _PART = 0;
    
    var _PART_INDEX = 0;
    
    var _INTERVAL_VAL;
    
    var _ELEMENT = document.querySelector("#text");
    
    function Type() { 
      var text =  _CONTENT[_PART].substring(0, _PART_INDEX + 1);
      _ELEMENT.innerHTML = text;
      _PART_INDEX++;
    
      if(text === _CONTENT[_PART]) {
    
      let imgIndexBase = _PART*3;
        IMAGES[imgIndexBase].classList.remove('fadeOut');
        IMAGES[imgIndexBase+1].classList.remove('fadeOut');
        IMAGES[imgIndexBase+2].classList.remove('fadeOut');
        setTimeout(function() { IMAGES[imgIndexBase].classList.add('fadeIn','show'); }, 0);
        setTimeout(function() { IMAGES[imgIndexBase].classList.add('fadeOut'); }, 2000);
        setTimeout(function() { IMAGES[imgIndexBase].classList.remove('fadeOut','show'); }, 3000);
        setTimeout(function() { IMAGES[imgIndexBase+1].classList.add('fadeIn','show'); }, 3000);
        setTimeout(function() { IMAGES[imgIndexBase+1].classList.add('fadeOut'); }, 5000);
        setTimeout(function() { IMAGES[imgIndexBase+1].classList.remove('fadeOut','show'); }, 7000);
        setTimeout(function() { IMAGES[imgIndexBase+2].classList.add('fadeIn','show'); }, 7000);
        setTimeout(function() { IMAGES[imgIndexBase+2].classList.add('fadeOut'); }, 9000);
        setTimeout(function() { IMAGES[imgIndexBase+2].classList.remove('fadeOut','show'); }, 10000);
      
    
    
    
        clearInterval(_INTERVAL_VAL);
        setTimeout(function() {
          _INTERVAL_VAL = setInterval(Delete, 50);
        }, 11000);
    
      }
    }
    
    
    
        function Delete() {
      var text =  _CONTENT[_PART].substring(0, _PART_INDEX - 1);
      _ELEMENT.innerHTML = text;
      _PART_INDEX--;
    
      // If sentence has been deleted then start to display the next sentence
      if(text === '') {
     
    
    
        clearInterval(_INTERVAL_VAL);
    
        // If last sentence then display the first one, else move to the next
        if(_PART == (_CONTENT.length - 1))
          _PART = 0;
        else
          _PART++;
        _PART_INDEX = 0;
    
        // Start to display the next sentence after some time
        setTimeout(function() {
          _INTERVAL_VAL = setInterval(Type, 100);
        }, 500);
      }
    }
    
    _INTERVAL_VAL = setInterval(Type, 100);
    
    </script>

Solution

For the es6 syntax issue, I think you have corrected according to the comments and the answer ealier. There's another issue you should fix in your code: IE 11 doesn't support multiple arguments for add() & remove() in classList. So you can't use code like

setTimeout(function() { IMAGES[imgIndexBase].classList.add('fadeIn','show'); }, 0);

You need to change it to

setTimeout(function () { IMAGES[imgIndexBase].classList.add('fadeIn'); }, 0);
setTimeout(function () { IMAGES[imgIndexBase].classList.add('show'); }, 0);

Also it's the same for the other classList.add() & classList.remove() with multiple arguments in your code.

So the edited part of your code snippet is like below:

//edit arrow function

var IMAGES = IMAGE_URLS.map(function (url, index) {
    var img = document.createElement('img');
    img.setAttribute('src', url);
    img.classList.add('anim' + (index % 3 + 1));
    img.classList.add('fadeOut');
    document.getElementById('images').appendChild(img);
    return img;
});

//edit classList in function Type()

let imgIndexBase = _PART * 3;
IMAGES[imgIndexBase].classList.remove('fadeOut');
IMAGES[imgIndexBase + 1].classList.remove('fadeOut');
IMAGES[imgIndexBase + 2].classList.remove('fadeOut');
setTimeout(function () { IMAGES[imgIndexBase].classList.add('fadeIn'); }, 0);
setTimeout(function () { IMAGES[imgIndexBase].classList.add('show'); }, 0);
setTimeout(function () { IMAGES[imgIndexBase].classList.add('fadeOut'); }, 2000);
setTimeout(function () { IMAGES[imgIndexBase].classList.remove('fadeOut'); }, 3000);
setTimeout(function () { IMAGES[imgIndexBase].classList.remove('show'); }, 3000);
setTimeout(function () { IMAGES[imgIndexBase + 1].classList.add('fadeIn'); }, 3000);
setTimeout(function () { IMAGES[imgIndexBase + 1].classList.add('show'); }, 3000);
setTimeout(function () { IMAGES[imgIndexBase + 1].classList.add('fadeOut'); }, 5000);
setTimeout(function () { IMAGES[imgIndexBase + 1].classList.remove('fadeOut'); }, 7000);
setTimeout(function () { IMAGES[imgIndexBase + 1].classList.remove('show'); }, 7000);
setTimeout(function () { IMAGES[imgIndexBase + 2].classList.add('fadeIn'); }, 7000);
setTimeout(function () { IMAGES[imgIndexBase + 2].classList.add('show'); }, 7000);
setTimeout(function () { IMAGES[imgIndexBase + 2].classList.add('fadeOut'); }, 9000);
setTimeout(function () { IMAGES[imgIndexBase + 2].classList.remove('fadeOut'); }, 10000);
setTimeout(function () { IMAGES[imgIndexBase + 2].classList.remove('show'); }, 10000);

Result in IE 11: