0

I have a code as shown below which is working perfectly fine on chrome and mozilla. But on IE its throwing an error at Line A.

The error which I am getting is: SCRIPT1002: Syntax error. The version of IE which I am using is 11.775.17763.0

/* greater than 767 px */
document.addEventListener("DOMContentLoaded", function (event) {
    if (window.innerWidth > 767) {
        document.querySelectorAll('.focustop .featured-block .featured-block__item-multi')[0].classList.add('featured-block__item-multi-active');
        const pics = document.querySelectorAll('.focustop .featured-block .featured-block__item-multi');
        const lastPic = pics.length - 1;
        const transitionDuration = 500; // matches CSS
        let transitionDelay =4000;
        const totalDelay = transitionDuration + transitionDelay;
        const intervalDelay = (transitionDuration * 2) + transitionDelay; // time to fade out + time to fade in + time to stay featured-block__item-active

        function toggleClass() {
            const activePic = document.querySelectorAll('.focustop .featured-block .featured-block__item-multi-active')[0];
            const activeIndex = Array.prototype.indexOf.call(pics, activePic);
            const nextIndex = activeIndex === lastPic ? 0 : activeIndex + 1;
            const nextPic = pics[nextIndex];

            setTimeout(() => activePic.classList.remove('featured-block__item-multi-active'), transitionDelay);    // Line A
            setTimeout(() => nextPic.classList.add('featured-block__item-multi-active'), totalDelay);
        }

        setInterval(toggleClass, intervalDelay);
    }
});
flash
  • 1,455
  • 11
  • 61
  • 132
  • 2
    IE11 does not support `=>` functions. – Pointy Nov 07 '19 at 20:34
  • https://caniuse.com/#feat=arrow-functions (spoiler: any browser of the last 4-5 years supports it no problem. Older ones like IE, no.) – Robin Zigmond Nov 07 '19 at 20:36
  • The question which I have posted here is a part of this [question](https://stackoverflow.com/questions/57593166/how-to-add-remove-class-to-specific-anchor-elements-inside-div). Let me know if that helps. – flash Nov 07 '19 at 22:44
  • As already suggested by other community members, Arrow functions are not supported in IE. You need to transpile your ES6 code to ES5 code. For which you can use Babel.js It can help to fix this issue for IE browser. Ref: https://babeljs.io/ – Deepak-MSFT Nov 08 '19 at 01:27
  • 1
    arrow functions are for the most part just syntactic sugar (not always but nearly so) so you can just use an anonymous function `setTimeout(function(){ activePic.classList.remove('featured-block__item-multi-active')}, transitionDelay);` – Mark Schultheiss Nov 10 '19 at 13:15
  • @MarkSchultheiss Appreciated your help on that. It worked. – flash Nov 12 '19 at 15:43

0 Answers0