Javascript / css 在 Inte.net Explorer 中不工作

Question

I'm testing my site on Inte.net Explorer via browser testing site(eg 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.stack.imgur.com/qxeUf.jpg?s=96&g=1','https://i.stack.imgur.com/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>

Answer 1

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
}

Answer 2

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: