Javascript doesn't work in Internet Explorer but in all other browsers. Why?

Question

The below Javascript (triggering the pagination background color of an element, when another element scrolls into view) doesn't work in Internet Explorer but in all other browsers. Does anyone have any idea why?

The code basis is also available in my pen: https://codepen.io/headstarterz/pen/PMdZdV/

<script>
function inViewport(element) {
  // Get the elements position relative to the viewport

  var bb = element.getBoundingClientRect();

 // Check if the element is outside the viewport
 // Then invert the returned value because you want to know the opposite

return !(bb.top > innerHeight || bb.bottom < 0);
}

var project1 = document.querySelector(".project-trigger1");
var project2 = document.querySelector(".project-trigger2");
var project3 = document.querySelector(".project-trigger3");

var pagination1 = document.querySelector(".bullet1");
var pagination2 = document.querySelector(".bullet2");
var pagination3 = document.querySelector(".bullet3");

// Listen for the scroll event

document.addEventListener("scroll", event => {
  // Check the viewport status

  if (inViewport(project1)) {
    pagination1.style.background = "#e3e3e3";
  } else {
    pagination1.style.background = "transparent";
  }
});

document.addEventListener("scroll", event => {
  // Check the viewport status

  if (inViewport(project2)) {
    pagination2.style.background = "#e3e3e3";
  } else {
    pagination2.style.background = "transparent";
  }
});

document.addEventListener("scroll", event => {
  // Check the viewport status

  if (inViewport(project3)) {
    pagination3.style.background = "#e3e3e3";
  } else {
    pagination3.style.background = "transparent";
  }
});

</script>

Script works in Chrome, Safari, Firefox, Edge

Script doesn't work in Internet Explorer 11

What exactly does "doesn't work" mean? Does *anything* happen? Errors reported? Have you tried any debugging? — Pointy, Aug 11 '19 at 20:10
Please try using the [debugging capabilities](https://developer.mozilla.org/en-US/docs/Mozilla/Debugging/Debugging_JavaScript) of your browser and [validate your HTML](https://html5.validator.nu/). Use tools like [JSHint](http://jshint.com/) to find problems with your code immediately. — Sebastian Simon, Aug 11 '19 at 20:13
Possible duplicate of [Support for ES6 in Internet Explorer 11](https://stackoverflow.com/questions/39902809/support-for-es6-in-internet-explorer-11) — Emile Bergeron, Aug 12 '19 at 19:23
Sorry, the close reason displayed (based on different close reasons) isn't helping much, it should point to the duplicate I linked to help future visitors. — Emile Bergeron, Aug 12 '19 at 19:25
Changing the "fat arrow functions" = 'document.addEventListener("scroll", event => ' to a I.E. friendly syntax = 'document.addEventListener("scroll", function (event)' does the trick. — Philipp Roth, Aug 12 '19 at 19:34

score 0 · Accepted Answer · answered Aug 11 '19 at 20:16

0

It is probably two reasons:

Firstly your closing <script> tag is spelled wrong (<skript>).

Also, you're using 'fat arrow functions', which is a feature of ES6. I would look into something like Babel to transpile your code to a I.E. friendly syntax

answered Aug 11 '19 at 20:16

PhunkmasterP

136
1
8

1

Thanks! The closing – Philipp Roth Aug 11 '19 at 20:19
Ok I see. Yeah I run into I.E. problems all the time because I write ES6 and test in Chrome, only to be in your scenario later. Even if you don't want to include Babel as a project dependency, a quick dirty workout would be to use their online R.E.P.L: https://babeljs.io/en/repl There you can just paste this code in and it gives you an I.E. valid output. Good luck! – PhunkmasterP Aug 11 '19 at 20:24
1

Have transpiled the code to a IE friendly syntax. Changed the "fat arrow functions" to 'document.addEventListener("scroll", function (event)' and it works fine in IE and the other browsers. Many thanks for quick help! – Philipp Roth Aug 11 '19 at 20:35
1

Thank you so much for the tip. I'll definitely include that as a project dependency! – Philipp Roth Aug 11 '19 at 20:42

Javascript doesn't work in Internet Explorer but in all other browsers. Why?

1 Answers1