onError Events

An intro to onerror events in JavaScript

Taylor Blumenstein 2025-1-22

onerror (on error) Events in JavaScript

An onerror event occurs when trying to link to an external file. The example I have for you is regarding images on a webpage. If an image gets removed from the place you linked it to, or if the user just can't load the image for some reason, you don't want to just have an empty spot on your webpage that could throw off everything. Instead, you can assign a permanent image to take its place while you are troubleshooting the missing image.

The main source I used for my research is:

In this video he explains how to handle this scenario.

Here is the sample code to get you started:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>onError</title>
</head>
<style>
    img{
        height: 300px;
        width: 300px;
    }
</style>

<body>
    <h1>Error Event Example</h1>
    <img id="img" src="YourImageHere" alt="">
    <img id="img" src="YourImageHere" alt="">
    <img id="img" src="YourImageHere" alt="">
    <img id="img" src="YourImageHere" alt="">
    <script>

        //The javascript code will go here.

    </script>
</body>
</html>

The first thing we nee to do is get a handle on the img tags. We will do this by using the querySelectorAll() method. We need to make sure we add the "All", so we don't just grab the first img tag, we grab all of them.

    <script>

        //The javascript code will go here.
        const img = document.querySelectorAll("img")
        //You can use any CSS selector in quotes for querySelectorAll() 

    </script>

Next, we will make a function that is meant to handle replacing the broken image with a defaultImage you have stored on a server or someplace you know it will not get lost or broken. In this case we can just use an image online because it's an example.

    <script>

        //The javascript code will go here.
        const img = document.querySelectorAll("img")
        //You can use any CSS selector in quotes for querySelectorAll() 

        const defaultImage (event) => {
            event.target.setAttribute("src", "linkToYourDefaultImage")
        }
        //This code is going to take the "event", that is triggered by a 
        //broken/unavailable link to an img tag, and set the src attribute
        //to the defaultImage.


    </script>

Finally, we need to loop through the array/nodelist we stored in the img variable above and add an event listener for errors. We will use the forEach() method to do this. Then when there's an error event with the images on the webpage the browser will invoke the defaultImage function we defined earlier.

    <script>

        //The javascript code will go here.
        const img = document.querySelectorAll("img")
        //You can use any CSS selector in quotes for querySelectorAll() 

        const defaultImage (event) => {
            event.target.setAttribute("src", "linkToYourDefaultImage")
        }
        //This code is going to take the "event", that is triggered by a 
        //broken/unavailable link to an img tag, and set the src attribute
        //to the defaultImage.

        img.forEach((i) => {
            i.addEventListener("error", defaultImage)
        })
        //Like I stated above this will loop though the array/nodelist of img, 
        //and if/when an error occurs, it will replace the image with the
        //defaultImage.

    </script>

Now to test our work we can intentionally break one or two of our image links and if everything is running correctly, your broken image should be replaced by the defaultImage you set in the function!