My Code for web resources javascript is running on chrome but not in IE 11 of dynamics crm

Question

My java-script Code for on-load event is running successfully in chrome and not working in IE 11. Don't know why its happening .Please help me, i searched a lot and not found the correct solutions.i am working the java-script for dynamics crm 2011 but not able to get the job done.Any changes is not showing in IE 11 but showing in chrome.I am adding my code below.

 function calculateManHour() {
    debugger;
    var advantageManHourCost = 0;
    var engageManHourCost = 0;
    var advantageManDayCost = 0;//new
    var engageManDayCost = 0;//new
    var advantageManHour = 0;
    var engageManHour = 0;
    var advantageManDay = 0;//new
    var engageManDay = 0;//new
    var currentQuoteProductId = Xrm.Page.data.entity.getId().toString().split("{")[1].split("}")[0];
    var costPricePerUnit = parseFloat(Xrm.Page.getAttribute("costprice").getValue());
    var serviceProvider = Xrm.Page.getAttribute("serviceprovider").getValue()[0].name;
    var quoteProductType = Xrm.Page.getAttribute("quoteproducttype").getValue();
    var quoteProductElem = Xrm.Page.getAttribute("quoteproducttype");
    var config = getRecord("manhourcostconfigSet", "2A7F8D4D-10C4-E911-943A-00155D1E13EA");
    var currentQuoteProduct = getRecord("QuoteDetailSet", currentQuoteProductId);
    advantageManHourCost = parseFloat(config.ManHourCost.Value);
    engageManHourCost = parseFloat(config.EngageManhourcost.Value);
    advantageManDayCost = parseFloat(config.AdvantageMandaycost.Value);//new
    engageManDayCost = parseFloat(config.EngageMandaycost.Value);//new
    if (quoteProductType == false) {
        Xrm.Page.getAttribute("valueoffering").setValue(true);
        if (serviceProvider == "Services_ADVANTAGE") {
            advantageManHour = costPricePerUnit / advantageManHourCost;
            advantageManDay = costPricePerUnit / advantageManDayCost;
            engageManHour = null;
            engageManDay = null;
            Xrm.Page.getControl("engagebudgetedmanhours").setVisible(false);
            Xrm.Page.getControl("engagemandaycost").setVisible(false);
            setTooltip("advantagemandaycost", advantageManDayCost, "advantagebudgetedmanhours", advantageManHourCost);
        }
        if (serviceProvider == "Services_ENGAGE") {
            engageManHour = costPricePerUnit / engageManHourCost;
            engageManDay = costPricePerUnit / engageManDayCost;
            advantageManHour = null;
            advantageManDay = null;
            Xrm.Page.getControl("advantagebudgetedmanhours").setVisible(false);
            Xrm.Page.getControl("advantagemandaycost").setVisible(false);
            setTooltip("engagemandaycost", engageManDayCost, "engagebudgetedmanhours", engageManHourCost);
        }
        var data = {
            "engagebudgetedmanhours": engageManHour,
            "advantagebudgetedmanhours": advantageManHour, 
            "engagemandaycost": engageManDay,
            "advantagemandaycost": advantageManDay
        }
        Xrm.Page.getAttribute("advantagebudgetedmanhours").setValue(advantageManHour);
        Xrm.Page.getAttribute("engagebudgetedmanhours").setValue(engageManHour);
        Xrm.Page.getAttribute("advantagemandaycost").setValue(advantageManDay);//new
        Xrm.Page.getAttribute("engagemandaycost").setValue(engageManDay);//new
        Xrm.Page.getAttribute("engagebudgetedmanhours").setSubmitMode("always");
        Xrm.Page.getAttribute("advantagebudgetedmanhours").setSubmitMode("always")
        Xrm.Page.getAttribute("engagemandaycost").setSubmitMode("always");//new
        Xrm.Page.getAttribute("advantagemandaycost").setSubmitMode("always")//new
        Xrm.Page.data.entity.save();

    }
}

function setTooltip(attribute1, tip1, attribute2, tip2) {
    debugger;
    try {
        if (!attribute1 || !tip1 && !attribute2 || !tip2) {
            return;
        }

        var control1 = Xrm.Page.getControl(attribute1);
        var control2 = Xrm.Page.getControl(attribute2);

        if (!control1 || !control2) {
            return;
        }

        var element1 = document.getElementById(attribute1 + "_d");
        var element2 = document.getElementById(attribute2 + "_d");


        if (!element1 || !element2) {
            return;
        }

        var tooltipSpan1 = document.createElement("span");

        tooltipSpan1.id = attribute1 + "_tooltip";
        tooltipSpan1.textContent = "Man Day Cost is = " + tip1;
        tooltipSpan1.setAttribute(
            "style",
            "display: none; width: 120px; background-color:  #fdfafa; color: ; rgb(23, 22, 22): center; padding: 5px 5px; border-radius: 3px;" +
            "border: 1px solid black;z-index: 1;"
        );

        var tooltipSpan2 = document.createElement("span");

        tooltipSpan2.id = attribute1 + "_tooltip";
        tooltipSpan2.textContent = "Man Hour Cost is = " + tip2;
        tooltipSpan2.setAttribute(
            "style",
            "display: none; width: 120px; background-color:  #fdfafa; color: ; rgb(23, 22, 22): center; padding: 5px 5px; border-radius: 3px;" +
            "border: 1px solid black;z-index: 1;"
        );

        element1.appendChild(tooltipSpan1);
        element2.appendChild(tooltipSpan2);

        document.getElementById(attribute1 + "_c").setAttribute("title", "Man Day Cost is = " + tip1);
        document.getElementById(attribute2 + "_c").setAttribute("title", "Man Hour Cost is = " + tip2);

        element1.addEventListener("mouseover", (e) => {
            tooltipSpan1.style.display = "inline";
            tooltipSpan1.style.top = (e.clientX + 20) + 'px';
            tooltipSpan1.style.left = (e.clientY + 20) + 'px';
        });
        element1.addEventListener("mouseout", (e) => {
            tooltipSpan1.style.display = "none";
        });

        element2.addEventListener("mouseover", (e) => {
            tooltipSpan2.style.display = "inline";
            tooltipSpan2.style.top = (e.clientX + 20) + 'px';
            tooltipSpan2.style.left = (e.clientY + 20) + 'px';
        });
        element2.addEventListener("mouseout", (e) => {
            tooltipSpan2.style.display = "none";
        });



    } catch (e) {
        console.log(e);
    }
}

Answer 1

You're using arrow => functions. IE11 doesn't support them. Arrow function come under ES6 which is not yet supported by IE11.

There are lot of online tools which will help you convert ES6 to Es5

Convert below function

element1.addEventListener("mouseover", (e) => {
        tooltipSpan1.style.display = "inline";
        tooltipSpan1.style.top = (e.clientX + 20) + 'px';
        tooltipSpan1.style.left = (e.clientY + 20) + 'px';
    });

to something like below

element1.addEventListener("mouseover", function(e) {
        tooltipSpan1.style.display = "inline";
        tooltipSpan1.style.top = (e.clientX + 20) + 'px';
        tooltipSpan1.style.left = (e.clientY + 20) + 'px';
    });