How to make this JavaScript function also compatible with Internet Explorer

Question

I am not an expert in JS. I got that function working perfectly fine however it is not working in IE. I think it is because of the loop function using 'let' , then in the function querying the index of the current loop item... I understand this might no be supported in older browsers.

However I don't know how to achieve the same result without that part... I found this

var g = document.getElementById('my_div');
for (var i = 0, len = g.children.length; i < len; i++)
{

    (function(index){
        g.children[i].onclick = function(){
              alert(index)  ;
        }    
    })(i);

}

from Get index of clicked element using pure javascript

but am not certain about how to use it. thanks for the help!

my function:

   window.onload = function(){


    const openers = document.querySelectorAll('.openerbuttons');
    const fullsections = document.querySelectorAll('.fullsection');

for(let i = 0; i < openers.length; i++){
  openers[i].addEventListener('click',function(){
    if(!fullsections[i].classList.contains('inview')){
        openers.forEach(function(opener) {
            opener.classList.remove('opened');
        });
        fullsections.forEach(function(fullsectionjs) {
    fullsectionjs.classList.remove('inview');
    });
    openers[i].classList.add('opened');
    fullsections[i].classList.add('inview');
    } else{
            openers[i].classList.remove('opened');
            fullsections[i].classList.remove('inview');
    }
  });
}
    }

Try this transpiled version of your code from this link to check whether it is working or not. https://textuploader.com/1o9rv You can use babel to transpile the code. https://babeljs.io/ — Deepak-MSFT, Nov 18 '19 at 15:13
You can check the MDN documentation to see if the methods you use are compatible or not. [Here's the listing for `classList` for example](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList#Browser_compatibility) - (it's not compatible). That page also contains the polyfill that you can use to patch your code. — Andy, Nov 18 '19 at 15:15

score 0 · Accepted Answer · answered Nov 18 '19 at 17:19

Thanks to the suggestion from the comments, and troubleshooting directly in IE 11 (didn't even know it had a console), I got this working with this code. the forEach method was not supported either, so I also changed that.

Note that classList IS somewhat supported in IE 11 , even classList.contains works.

    'use strict';

window.onload = function () {
  var openers = document.querySelectorAll('.openerbuttons');
  var fullsections = document.querySelectorAll('.fullsection');

  var _loop = function _loop(i) {
    openers[i].addEventListener('click', function () {
      if (!fullsections[i].classList.contains('inview')) {
          for (var j = 0, len = openers.length; j < len; j++) {
          openers[j].classList.remove('opened');
          fullsections[j].classList.remove('inview');
          }
        openers[i].classList.add('opened');
        fullsections[i].classList.add('inview');
      } else {
        openers[i].classList.remove('opened');
        fullsections[i].classList.remove('inview');
      }
    });
  };

  for (var i = 0; i < openers.length; i++) {
    _loop(i);
  }
};

Thanks for posting the solution for this issue. I suggest you to try to mark your own answer as an accepted answer for this question after 48 hrs, when it is available to mark. It can help other community members in future in similar kind of issues. Thanks for your understanding. — Deepak-MSFT, Nov 19 '19 at 07:10

How to make this JavaScript function also compatible with Internet Explorer

1 Answers1