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

Solution 1:

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 functionvarIMAGES = 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:

Solution 2:

You try to use lambda functions and map ES6 function which are both not supported by IE. If you use jQuery then you can use jQuery's equivalent of ES6 map function:

var mappedArray = $.map(realArray, function(val, i ) {
  // Do something
});

You should also use var instead of let and const keywords which are not supported by IE as well.

Replace your array function

IMAGE_URLS.map((url, index) => {} 

with:

jQuery.map(IMAGE_URLS, function (url, index)
{
  //mapping code here
}