JQuery script does not run in Internet Explorer (syntax error on line 1 char 1)

Question

I am working on a responsive html layout for a new project and it contains some jquery scripts that work fine in every browser ... Except for Internet Explorer (I am testing it on IE9 now).

I naturally checked the IE javascript console, which gives me the following error message:

SCRIPT1002: Syntax error scripts.js, line 1 character 1 

I have no idea where this could have come from, since neither DreamWeaver nor Komodo Edit found anything bad.

The layout is located at the following address: http://zipion-live.be/cal-bw/

And here is the script that throws the error:

 const visible = "visible"; const hidden = "hidden"; const open = "open"; $(document).ready(function(e) { $(".collapsible_container .links").hide(); showHomeMenu(); $("#home_link").click(showHomeMenu); $("#admin_link").click(showAdminMenu); $("#left_menu .links a").click(function() { $("#left_menu .links").slideUp("fast"); $("#left_menu .collapsible_container").removeClass(open); }); $("section .section_header").click(function() { var sectionContent = $(this).parent("section").children(".section_content"); var sectionHeader = $(this); toggleSection(sectionHeader, sectionContent); }); }); function toggleSection(sectionHeader, sectionContent) { var isOpen = sectionHeader.hasClass(open); if (isOpen) { sectionContent.slideUp("slow", function() { sectionHeader.removeClass(open); }); } else { sectionContent.slideDown("slow"); sectionHeader.addClass(open); } } function setLeftMenuHeight() { var visibleChildren = $("#left_menu .collapsible").not(".hidden") if (visibleChildren.length > 8) { $("aside").removeClass("h100").addClass("h150"); } else if (visibleChildren.length > 4) { $("aside").removeClass("h150").addClass("h100"); } else { $("aside").removeClass("h100").removeClass("h150"); } } function showHomeMenu() { $("#left_menu .admin").addClass("hidden"); $("#left_menu .home").removeClass("hidden"); $("#left_menu .admin h3 a").unbind("click"); setLeftMenuHeight(); $("#left_menu .home h3 a").click(function() { var current = $(this).parent("h3").parent(".collapsible_container").children(".links") animateMenu(current); }); } function showAdminMenu() { $("#left_menu .home").addClass("hidden"); $("#left_menu .admin").removeClass("hidden"); $("#left_menu .home h3 a").unbind("click"); setLeftMenuHeight(); $("#left_menu .admin h3 a").click(function() { var current = $(this).parent("h3").parent(".collapsible_container").children(".links") animateMenu(current); }); } function animateMenu(current) { var isVisible = current.hasClass(visible) $("#left_menu .links").removeClass(visible); $("#left_menu .collapsible_container").removeClass(open); $.when($("#left_menu .links").slideUp("fast")).then(function() { if (!isVisible) { current.slideDown("fast"); current.addClass(visible); current.parent(".collapsible_container").addClass(open); } else { current.parent(".collapsible_container").removeClass(open); } }); } 

Any ideas on this issue? I am completely new to jQuery and I absolutely do not know what is here ...

PS: I use jquery in version 1.11.0, if necessary.

Answer 1

Although const is a standard feature of Javascript 1.5 , it is not supported by modern versions of IE (6-10). Only browsers with gecko and Chrome support are supported.

Variables in javascript now use var rather than const to avoid this problem.

Change this:

 const visible = "visible"; const hidden = "hidden"; const open = "open"; 

For this:

 var visible = "visible"; var hidden = "hidden"; var open = "open"; 

Answer 2

Trying to change const to var.

 var visible = "visible"; var hidden = "hidden"; var open = "open";