JS problem with eventListener on IE11 - slide navigation not working

Question

i'm very new on the javascript field and i have a big problem. I worked on it the last 7 days and i can't find a solution.

I hope that anyone could tell me the code to solve this problem.

The following snippet show's my navigation. It work's fine on chrome, firefox but not on the IE11 - and it must worked on it.

It don't opened on IE11.

I tried the attachEvent function, but i didn't find the right code.

I'm very thankful for every help. It would be a pleasure if anybody could tell me the little code part.

Thank you!!

const toggleButton = document.querySelector('.toggle-menu');
const navBar = document.querySelector('.nav-bar');
toggleButton.addEventListener('click', () => {
  navBar.classList.toggle('toggle');
});

.nav-bar {
  position: fixed;
  z-index: 1;
  background-color: red;
  top: 0;
  left: -100%;
  height: 100%;
  width: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.5s ease-out;
  padding: 2%;
}
.toggle {
  left: 0;
  box-shadow: 1px 0 15px 2px rgba(0, 0, 0, 0.4);

}
.toggle-menu {
  background-color: white;
  position: fixed;
  top: 1rem;
  left: 1rem;
  width: 3.5rem;
  height: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 0.2rem 0.5rem;
  border-radius: 0.5rem;
  overflow: hidden;
  background-clip: padding-box;
  border: 3px solid black;
  cursor: pointer;
}
.line {
  width: 100%;
  height: 4px;
  border-radius:5px;
  background-color: #000;
  transition: 0.2s ease-out;
}
.toggle .line1 {
  background-color: #e30513;
  transform: scale(0.9) rotateZ(-45deg) translate(-8px, 8px);
}
.toggle .line2 {
  display: none;
}
.toggle .line3 {
  background-color: #e30513;
  transform: scale(0.9) rotateZ(45deg) translate(-7px, -8px);
}

.toggle .toggle-menu {
  background-color: white;
  border: 0;
}
.nav-list {
  list-style: none;
  padding: 0;
  line-height: 0.5;
}
.nav-list-item {
  text-align: left;
  padding: 1rem 0;
}
.nav-list-item a:hover{
    color: white;
}
.nav-link {
  color: #fff;
  font-size: 1.3rem;
  text-decoration: none;
  position: relative;
  padding-bottom: 0.4rem;
}
.nav-list-item a:hover{
    color: white;
  }
.nav-link::before {
  position: absolute;
  content: '';
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: #fff;
  transform: scaleX(0);
  transition: 0.4s ease-in-out;
  transform-origin: left;
}
.nav-link:hover::before {
  transform: scaleX(1);
}

<div class="navigation">
                  <nav class="nav-bar">
                     <div class="toggle-menu">
                        <div class="line line1"></div>
                        <div class="line line2"></div>
                        <div class="line line3"></div>
                     </div>
                     <ul class="nav-list">
                        <li class="nav-list-item"><a href="page1.html" class="nav-link">Link 1</a></li>
                        <li class="nav-list-item"><a href="page2.html" class="nav-link">Link 2</a></li>
                     </ul>
                  </nav>
               </div>

`classList.toggle` may be the issue here as it may not be supported in IE11. https://caniuse.com/?search=classlist Try to find an alternative solution https://stackoverflow.com/questions/14615712/toggle-classname-onclick-javascript/34514892 — Ari Seyhun, Oct 14 '20 at 06:14
what errors do you see in the browser developer tools console ... something about `const` ... something about syntax error pointing to `=>` ? none of that javascript is able to be run in IE — Jaromanda X, Oct 14 '20 at 06:14
[How can I debug my JavaScript code?](https://stackoverflow.com/questions/988363/how-can-i-debug-my-javascript-code) — Andreas, Oct 14 '20 at 06:27
[Can I use... Support tables for HTML5, CSS3, etc](https://caniuse.com) — Andreas, Oct 14 '20 at 06:27
If you think that replacing the `=>` arrow functions with the normal function can help to fix the issue for the IE browser then I suggest you please mark the helpful suggestion as an accepted answer. It can help other community members in the future in similar kinds of issues. Thanks for your understanding. — Deepak-MSFT, Oct 29 '20 at 05:07

score 0 · Answer 1 · answered Oct 14 '20 at 06:19

0

Try to replace your arrow function with a regular function as IE11 doesn't support arrow functions.

const toggleButton = document.querySelector('.toggle-menu');
const navBar = document.querySelector('.nav-bar');
toggleButton.addEventListener('click', function () {
  navBar.classList.toggle('toggle');
});

answered Oct 14 '20 at 06:19

Ari Seyhun

11,506
16
62
109

could you give me an example? it's a shame, i haven't learned it yet – Tr4shL0rd Oct 14 '20 at 06:22
@Tr4shL0rd I added the example in the answes. `() => { ... }` should become `function() { ... }` – Ari Seyhun Oct 14 '20 at 06:25
oh sorry, my mistake. but it won't work - after refresh it don't show anything when i activate the ActiveX... – Tr4shL0rd Oct 14 '20 at 06:35
Hmm.. are you sure there's nothing in your IE11 console ? Any errors? – Ari Seyhun Oct 14 '20 at 06:39
i try another way without JS - i will get back later – Tr4shL0rd Oct 14 '20 at 06:58

score 0 · Answer 2 · answered Oct 15 '20 at 01:41

I agree with the suggestion provided by Acidic9 regarding the arrow functions.

Arrow functions not supported in the IE browser and your JS code uses the arrow functions.

While running the code in the IE browser it will show the syntax error.

To fix the issue you need to remove the arrow function from your JS code.

Below is your problematic code:

toggleButton.addEventListener('click', () => {
  navBar.classList.toggle('toggle');
});

It needs to replace with the code below will fix the issue.

toggleButton.addEventListener('click', function () {
  navBar.classList.toggle('toggle');
});

Here is the full modified code:

var toggleButton = document.querySelector('.toggle-menu');
var navBar = document.querySelector('.nav-bar');
toggleButton.addEventListener('click', function () {
  navBar.classList.toggle('toggle');
});

.nav-bar {
  position: fixed;
  z-index: 1;
  background-color: red;
  top: 0;
  left: -100%;
  height: 100%;
  width: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.5s ease-out;
  padding: 2%;
}
.toggle {
  left: 0;
  box-shadow: 1px 0 15px 2px rgba(0, 0, 0, 0.4);

}
.toggle-menu {
  background-color: white;
  position: fixed;
  top: 1rem;
  left: 1rem;
  width: 3.5rem;
  height: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 0.2rem 0.5rem;
  border-radius: 0.5rem;
  overflow: hidden;
  background-clip: padding-box;
  border: 3px solid black;
  cursor: pointer;
}
.line {
  width: 100%;
  height: 4px;
  border-radius:5px;
  background-color: #000;
  transition: 0.2s ease-out;
}
.toggle .line1 {
  background-color: #e30513;
  transform: scale(0.9) rotateZ(-45deg) translate(-8px, 8px);
}
.toggle .line2 {
  display: none;
}
.toggle .line3 {
  background-color: #e30513;
  transform: scale(0.9) rotateZ(45deg) translate(-7px, -8px);
}

.toggle .toggle-menu {
  background-color: white;
  border: 0;
}
.nav-list {
  list-style: none;
  padding: 0;
  line-height: 0.5;
}
.nav-list-item {
  text-align: left;
  padding: 1rem 0;
}
.nav-list-item a:hover{
    color: white;
}
.nav-link {
  color: #fff;
  font-size: 1.3rem;
  text-decoration: none;
  position: relative;
  padding-bottom: 0.4rem;
}
.nav-list-item a:hover{
    color: white;
  }
.nav-link::before {
  position: absolute;
  content: '';
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: #fff;
  transform: scaleX(0);
  transition: 0.4s ease-in-out;
  transform-origin: left;
}
.nav-link:hover::before {
  transform: scaleX(1);
}

<div class="navigation">
                  <nav class="nav-bar">
                     <div class="toggle-menu">
                        <div class="line line1"></div>
                        <div class="line line2"></div>
                        <div class="line line3"></div>
                     </div>
                     <ul class="nav-list">
                        <li class="nav-list-item"><a href="page1.html" class="nav-link">Link 1</a></li>
                        <li class="nav-list-item"><a href="page2.html" class="nav-link">Link 2</a></li>
                     </ul>
                  </nav>
               </div>

Output in the IE 11 browser:

JS problem with eventListener on IE11 - slide navigation not working

2 Answers2