Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

HTML Basic

HTML Reference

HTML onerror Attribute

Posted in HTML Tutorial
Updated on Sep 22, 2024
By Mari Selvan
👁️ 73 - Views
⏳ 4 mins
💬 1 Comment
HTML onerror Attribute

Photo Credit to CodeToFun

🙋 Introduction

The onerror attribute is a powerful feature in HTML that allows developers to handle errors that may occur while loading an external resource, such as an image or a script.

This attribute is commonly used to provide fallback mechanisms or log errors when a resource fails to load.

🎯 Purpose of onerror

The primary purpose of the onerror attribute is to specify a JavaScript function to be executed when an error occurs during the loading of an external resource.

This enables developers to take specific actions, such as displaying an alternative image or logging the error for further analysis.

💎 Values

The onerror attribute accepts a JavaScript function as its value. This function will be triggered when an error occurs. Here's a simple example:

onerror.html
Copied
Copy To Clipboard
<img src="example.jpg" onerror="handleError()">

🧠 How it Works

In this example, if the image with the source "example.jpg" fails to load, the handleError JavaScript function will be executed.

📄 Example

Let's look at a more comprehensive example of how to use the onerror attribute:

onerror.html
Copied
Copy To Clipboard
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>onerror Attribute Example</title>
  <script>
    function handleImageError() {
      console.log("Error loading image!");
      document.getElementById("fallbackImage").src = "fallback.jpg";
    }
  </script>
</head>
<body>
  <img src="example.jpg" onerror="handleImageError()" id="fallbackImage" alt="Fallback Image">
</body>
</html>

🧠 How it Works

In this example, if the image with the source "example.jpg" encounters an error, the handleImageError JavaScript function is called.

This function logs an error message and sets the source of an alternative image ("fallback.jpg") to provide a fallback.

🔄 Dynamic Values with JavaScript

You can dynamically set the onerror attribute using JavaScript, allowing for more flexibility in handling errors based on different conditions or user interactions:

onerror.html
Copied
Copy To Clipboard
<script>
  // Dynamically set onerror for an image
  document.getElementById("dynamicImage").onerror = function() {
    console.log("Dynamic image loading error!");
    this.src = "dynamic-fallback.jpg";
  };
</script>

🧠 How it Works

In this script, the onerror attribute is dynamically set for an image with the id dynamicImage. If an error occurs while loading this image, a JavaScript function is executed to log an error message and set a dynamic fallback source.

🏆 Best Practices

  • Use the onerror attribute to gracefully handle errors and provide fallbacks for critical resources like images or scripts.
  • Ensure that the JavaScript function assigned to onerror is well-defined and handles errors appropriately.
  • Test your error-handling mechanisms across different browsers to ensure compatibility.

🎉 Conclusion

The onerror attribute is a valuable tool for managing errors when loading external resources in HTML.

By leveraging this attribute, developers can enhance the robustness and reliability of web applications.

👨‍💻 Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
👋 Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Mari Selvan
Mari Selvan
8 months ago

If you have any doubts regarding this article (HTML onerror Attribute), please comment here. I will help you immediately.

We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy