JSFiddle - React, Tailwind, and code Playground

by sanford

HTML

<DIV CLASS="body">



<H1>onerror Event Sample</H1>



<P>This sample uses the <b>onerror</b> event to handle an error while an object is downloading. Click the Load First Image button to load the invalid image source. When the button is clicked, a specific <b>onerror</b> handler is set on the <b>IMG</b> object, and the value of the <b>ALT</b> attribute is changed accordingly.</P>



<P>In addition to changing the value of the <b>ALT</b> attribute, Dynamic HTML allows authors to use other means to recover from load errors.

Click the Load Second Image button to load an invalid image source.

When the button is clicked, the error handler adds some alternate HTML to be displayed in place of the image.</P>



<P>

<INPUT TYPE=button VALUE="Load First Image" onclick="fnLoadFirst()">

<INPUT TYPE=button VALUE="Load Second Image" onclick="fnLoadSecond()">

<P>

<DIV ID="oContainer">

</DIV>



<!-- START_PAGE_FOOTER -->

<BR><BR><BR>

<p class="viewsource">[Right-click and choose View Source from the shortcut menu.] </p>

<A CLASS="copyright" HREF="http://www.microsoft.com/isapi/gomscom.asp?TARGET=/info/cpyright.htm">&copy; 2007 Microsoft Corporation. All rights reserved. Terms of use.</A>

<!-- END_PAGE_FOOTER -->

</DIV>

JavaScript

var sImg='<IMG STYLE="display: none;" ID=oStub ALT="Default Text">';

function fnLoadFirst(){

    oContainer.innerHTML=sImg;

    oStub.onerror=fnLoadFail1;

    oStub.src="";

    oStub.style.display="block";

}

function fnLoadSecond(){ alert(true);

    oContainer.innerHTML=sImg;

    oStub.onerror=fnLoadFail2;

    oStub.src="";

    oStub.style.display="block";

}

function fnLoadFail1(){

    oStub.alt="Image failed to load.";

    return true;

}

function fnLoadFail2(msg,url,line){ alert(true);

    oContainer.innerHTML="<b>Use this HTML instead of the image</b>";

}