Search code examples
javascripthtmlxsltinternet-explorer-11

onclick function in IE11 not working


I've this template for function call to show some detail. It is working in IE9 but not in IE11. How to make it compatible for IE11? The event is not getting called.

 <xsl:template name="DrillLink">
            <xsl:param name="ObjectName" select="''"/>
            <xsl:param name="ObjectID" select="''"/>
            <xsl:choose>
                <xsl:when test="(@ObjectType = 'BO' or @ObjectType = 'SO') and @DetailEnabled = '1' and @HideDetail = '0' ">
                    <span href="javascript:;"  onMouseOver="window.status='Drill down {@ObjectName}'; return true;" value ="'0'" onMouseOut="window.status=''; return true;"
                        onClick="showDetail(this); return false;" box_name="expand" id="ShowDetail" style="margin-right:5;" detailIndent="1"
                        title="{@ObjectDetailText}"
                        OrderKey="{@OrderKey}"
                        StartDate="{@Date}" EndDate="{@Date}"
                        ObjectID = "{@ChildObjList}"
                        Duration    = "{@Date}"
                        TimeZoneID = "{@TimeZoneID}"
                        TransformUpID = "{@TransformUp}"
                        TransformDownID = "{@TransformDown}"
                        RoundTypeID = "{@RoundType}"
                        PrecisionID = "{@Precision}"
                        CarryForwardPrecisionID = "{@CarryForwardPrecision}"
                        UserID = "{@UserID}"
                        EnableObjectType = "{@ObjectType}"
                        DisplayBuilderID = "{@DisplayBuilderID}"
                        RealTimeView = "{@RealTimeView}"
                        ForwardHour = "{@ForwardHour}"
                        BackwardHour = "{@BackwardHour}"
                        class = "dmActionBtn"
                    >+</span>
                    <xsl:text>&amp;#160;</xsl:text>
                </xsl:when>
                <xsl:otherwise>
                    <xsl:choose>
                        <xsl:when test="normalize-space(@ObjectID) = 0 ">
                            <xsl:text>&amp;#160;</xsl:text>
                        </xsl:when>
                        <xsl:otherwise>

                        </xsl:otherwise>
                    </xsl:choose>
                </xsl:otherwise>
            </xsl:choose>
        </xsl:template>

Solution

  • There are a few problems:

    Some browsers tolerate the (incorrect) capitalisation, and some do not (which would explain the inconsistencies between them).

    Also, note that you should not be using inline event handlers to begin with, and should instead be making use of addEventListener to attach the respective events to the elements:

    document.getElementById("button").addEventListener("click", function() {
      console.log('Clicked');
    });
    <button id="button">Click</button>

    Hope this helps! :)