Javascript does not work in IE 11

Asked

Viewed 199 times

0

Recently I was looking at some websites and found a code "Dark Mode", but when testing it I realized that it does not work in IE 11.

In IE developer mode the error is "Syntax".

Code:

const switchTumbler = () => {
const wrapper = document.querySelector(".tumbler__wrapper");
wrapper.addEventListener("click", () => {
toggleNightMode();
});
};
switchTumbler();
const toggleNightMode = () => {
document.body.classList.toggle("body--night-mode");
document.querySelector(".tumbler").classList.toggle("tumbler--night-mode");
document.querySelectorAll(".post").forEach(post => {
post.classList.toggle("post--night-mode");
});
};

They could help me, I would like to use it in IE, but I am layman in javascript.

javascript script

  • The IE11 does not support the function .toggle of classList. You to use the option add and remove, only.

  • 1

    There is a website that I personally find very cool to check the compatibility of browsers: https://caniuse.com/

  • @Valdeirpsr here ran the .toggle normal ;)

  • @sam vi no MDN, but I got confused. What doesn’t work is the second parameter. Thank you for the correction.

2 answers

4

IE11 does not support Arrow functions, classList (some versions) or -forEach in collections, only in Arrays. You have to use older Javascript. You can change the code to something like this:

  • () => {} mute to function(){}
  • .classList switches to a function that does this
  • .forEach uses the array method like this Array.prototype.forEach.call(

Demo: https://codepen.io/sergiocrisostomo/pen/WNeKpJE

function toggleNightMode() {
  console.log("toggleNightMode");
  toggleClass(document.body, "body--night-mode");
  toggleClass(document.querySelector(".tumbler"), "tumbler--night-mode");

  Array.prototype.forEach.call(
  document.querySelectorAll(".post"), 
  function(post) {
    toggleClass(post, "post--night-mode");
  });
}

function toggleClass(el, clss) {
  let classes = [];
  if (el.className.indexOf(clss) === -1) {
    classes = el.className.split(" ").concat(clss);
  } else {
    classes = el.className.split(clss);
  }
  el.className = classes.filter(Boolean).join(" ");
}

function switchTumbler() {
  const wrapper = document.querySelector(".tumbler__wrapper");
  wrapper.addEventListener("click", toggleNightMode);
}
switchTumbler();

1

IE11 does not actually support Arrows functions and the .forEach. In the updated version I tested here, the classList worked perfectly.

What you have to do is change the arrows functions for function() and the .forEach by a for common. See in the gif below that no Javascript error is returned in the console and the code runs normal:

inserir a descrição da imagem aqui

The code will look like this:

const switchTumbler = function() {
  const wrapper = document.querySelector('.tumbler__wrapper')

  wrapper.addEventListener('click', function() {
    toggleNightMode()
  })
}                          

switchTumbler()

const toggleNightMode = function() {
  document.body.classList.toggle('body--night-mode')
  document.querySelector('.tumbler').classList.toggle('tumbler--night-mode')
  const posts = document.querySelectorAll('.post')
  for(let x=0; x < posts.length; x++){
    posts[x].classList.toggle('post--night-mode')
  }
}

Tested version of IE11:

inserir a descrição da imagem aqui

Browser other questions tagged javascript script

You are not signed in. Login or sign up in order to post.