addEventListener onerror and error event is not working [duplicate]

Question

I have a asp.net control which is loading dyanmically with repeated controls. I just want a alternative image if image src is not loaded or an error event is fired on an image element,but it is not working

<asp:Image ID ="test1" ImageUrl="test1.jpg"  runat="server" CssClass="NotFoundMain" />
<asp:Image ID ="test2" ImageUrl="test14.jpg"  runat="server" CssClass="NotFoundMain" />

 $(document).ready(function () {

        function callImageError(test) {
            console.log(test)
            alert()
        test.setAttribute('src', './Image/WebSiteImage/ImageNotAvailable.jpg');
    }

    function gotImageElement(item) {
        item.addEventListener('onerror', callImageError(item));
//        item.onerror(callImageError(item))
    }

    var mImg = document.getElementsByClassName("NotFoundMain");
    for (var i = 0; i < mImg.length; i++) {
            gotImageElement(mImg[i])
        }
        //mImg.forEach(gotImageElement)
    });

But this is not working even if image is there this event is fired and i get no image found image Am i doing something wrong. Please help

Answer 1

The event name is error, not onerror. Another issue is that you have to provide a function to be called when an event occurs instead calling it immediately.

item.addEventListener('error', function(){ callImageError(item) });