[Solved]Problem with JS in IE

1

Hi friends! I finished me Twitch.TV project https://parfum505.github.io/twitchTV/build/ , and it works good in all browsers except IE. Console doesn’t show any error in IE too, but JS doesn’t working. How can I see what is wrong?

2

Easy… Don’t use IE :stuck_out_tongue_closed_eyes:

4 Likes
3

:joy: Is anyone use it at all?

4

What is exactly wrong? I cannot see the problem. By the way you shouldn’t be laughing at IE. As a developer you must be prepared to support IE. If you work for example for a big corporation they will always look at numbers. And numbers say that IE still has around 5% of a market share. They will want to reach this 5% as well. So whether you like it or not they will expect you to write code that works on IE.

1 Like
5

Or use Babel… :wink:

6

I’ve found the error - IE telling that object “buttons” in line 217 doesn’t support method forEach.:confused:
var buttons = document.querySelectorAll('.buttons div');
In other browsers this NodeList has method forEach.

7

I’m using Babel in this project, but it seems not enough for IE :sweat:

8

Have you tweaked the settings? I thought it said on the main page that it did…

Yeah that’s it. Polyfills make newer syntax work on older browsers. The problem you are having isn’t JavaScript. Its the DOM. Although it looks like JS, objects like window and document and methods like XMLHTTPRequest and such are actually not in the language, but provided by the browser itself. Mozilla, Google, and I believe Microsoft now with Edge all decided to keep the DOM pretty much the same, but IE doesn’t do this, hence the reason why everyone hates it. This is why DOM libraries like jQuery and React DOM are so nice, because they take care of what each browser has.

1 Like
9

I solve this problem like this:


buttons[0][0].addEventListener('click', toggleClassActive, false);
buttons[0][1].addEventListener('click', toggleClassActive, false);
buttons[0][2].addEventListener('click', toggleClassActive, false);

buttons[0][0].addEventListener('transitionend', toggleClassChannels, false);
buttons[0][1].addEventListener('transitionend', toggleClassChannels, false);
buttons[0][2].addEventListener('transitionend', toggleClassChannels, false);

I just turned NodeList into the Array, then add eventListener to each value.
And it works!
But when I realised that I need to change all my functions with “forEach” I decided not to deal with IE.

1 Like