0

I am using this JS code to add a class on a activate bootstrap 4 navigation link, and on most browsers it is working, but on IE11 not. Any idea why?

"use strict";
var nav = document.querySelector('.navbar');
var links = nav.querySelectorAll('.highlight');
  links.forEach(function(link){
    if (link.href == window.location.href.split("#")[0]) {
      link.classList.add('active');
    }
  });

links.forEach(function(link){

  link.addEventListener('click', function(e) {
    links.forEach(function(link){
      link.classList.remove('active');
    });
      this.classList.add('active');
  });
});

var kontaktLink = document.querySelector('.kontaktLink');
var navBarToggle = document.getElementById('navbarSupportedContent');
var togglerButton = document.querySelector('.navbar-toggler');

kontaktLink.addEventListener('click', function() {
  if (navBarToggle.classList.contains('show')) {
    navBarToggle.classList.remove('show');
    navBarToggle.classList.add('collapse');
    togglerButton.classList.add('collapsed');
    togglerButton.setAttribute('aria-expanded','false');
  }
});
Tiago Martins Peres
  • 14,289
  • 18
  • 86
  • 145
Viltas S
  • 11
  • 1
  • 3
    Did you check the console for error messages? Also please create a [mcve]. –  Oct 17 '18 at 11:09
  • IE11 doesnt support as much of ECMAScript as Edge, Chrome, FF, etc does – mast3rd3mon Oct 17 '18 at 11:10
  • 4
    *querySelectorAll* returns a *NodeList*, to which the [*forEach* method](https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach) has only been recently added. IE 11 doesn't support it. – RobG Oct 17 '18 at 11:11
  • My guess is it's because you're calling `forEach` on the result of `querySelectorAll`. Bootstrap requires jQuery, and jQuery makes stuff like this **a lot** easier and shorter. I'd look into using it instead. –  Oct 17 '18 at 11:12
  • @RobG You should post your comment as answer – yunzen Oct 17 '18 at 11:29

3 Answers3

1

Because of IE... :)

Check out your console output for errors. There will be some function that is not supported in ie 11

Unsupported querySelectorAll

Maybe unsupported classList property

Or maybe even forEach function

Jozef Cipa
  • 2,133
  • 3
  • 15
  • 29
1

IE11 only support up to ECMAScript 5, whereas other more modern browsers use ECMAScript 6. They don't intent on updating it either. ES 5 basically has less features for Javascript than ES 6, so that could be the culprit.

I like to use https://caniuse.com/ to see which functions are supported by which browser.

For example, it looks like querySelectorAll is supported by IE11: https://caniuse.com/#search=queryselectorall

EDIT: If you do wish to use ES6 features in IE11, you can have a look at BabelJS. https://babeljs.io/

Namstel
  • 53
  • 4
  • 2
    NodeLists aren't part of ECMAScript, they're host objects. The relevant specification is the [*DOM Living Standard*](https://dom.spec.whatwg.org/#interface-nodelist). In regard to ECMAScript, Array.prototype.forEach has been supported since IE 9. – RobG Oct 17 '18 at 11:35
0

So, IE11 does not support forEach on a nodeList. I solved this problem by expanding the nodeList.prototype: NodeList.prototype.forEach = Array.prototype.forEach;

Viltas S
  • 11
  • 1