Reputation: 11
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');
}
});
Upvotes: 0
Views: 248
Reputation: 11
So, IE11 does not support forEach on a nodeList. I solved this problem by expanding the nodeList.prototype: NodeList.prototype.forEach = Array.prototype.forEach;
Upvotes: 0
Reputation:
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/
Upvotes: 1
Reputation: 2227
Because of IE... :)
Check out your console output for errors. There will be some function that is not supported in ie 11
Maybe unsupported classList property
Or maybe even forEach function
Upvotes: 1