Enable error event listener only for the specified object

Question

Enable error event listener only for the specified object

I am attempting to load a Youtube thumbnail using a URL. If the image from the URL does not exist or throws an error, I want to display a placeholder.

To achieve this functionality, I have written the following JavaScript code:

const yt = document.getElementById('YoutubeThumbnail'); //img tag of my requested image

yt.addEventListener('error', (){
    yt.setAttribute('src', 'placeholder');
});

This implementation works as expected, however, there is an issue where sometimes the favicon from the requested site also triggers an error. Just for reference, maxresdefault.jpg is the specific image I need to retrieve.

https://i.sstatic.net/H2JjJ.png

Since I am handling all errors in my code, it invokes the placeholder image when the favicon generates an error even if the requested image does not encounter any issues.

Is there a way to only handle errors related to my maxresdefault.jpg and ignore errors associated with the favicon?

Thank you for your help!

javascript

Answer 1

Answer №1

To enhance your anonymous error event handler, consider incorporating a parameter to analyze the value stored in the src attribute of the target element.

yt.addEventListener("error", (event){
    if(event.target.src === 'maxresdefault.jpg') {
        yt.setAttribute('src', 'placeholder');
    }
});

Answer 2

To enhance your anonymous error event handler, consider incorporating a parameter to analyze the value stored in the src attribute of the target element.

yt.addEventListener("error", (event){
    if(event.target.src === 'maxresdefault.jpg') {
        yt.setAttribute('src', 'placeholder');
    }
});

Answer 3

Answer №2

To achieve this, you can utilize the event.target.src property along with the includes function in the following way:

const yt = document.getElementById('YoutubeThumbnail'); // locating the img tag where the image is displayed

yt.addEventListener("error", (event){
    if(event.src.target.includes('maxresdefault.jpg'))
        yt.setAttribute('src', 'placeholder');
});

Answer 4

To achieve this, you can utilize the event.target.src property along with the includes function in the following way:

const yt = document.getElementById('YoutubeThumbnail'); // locating the img tag where the image is displayed

yt.addEventListener("error", (event){
    if(event.src.target.includes('maxresdefault.jpg'))
        yt.setAttribute('src', 'placeholder');
});

Enable error event listener only for the specified object

Answer №1

Answer №2

Similar questions

When text is wrapped within the <li> tag

Retrieve the parent document for every item within a Firebase collection group

Discover the secret to revealing hidden text as it seamlessly transitions through other text

Utilizing React Router for Notebook and Note Components with Nested Routes

Incorporating a Vue application into a server-side framework application, encountering issues with Vue Public Path

Encountered a hard navigation error in NextJs when trying to navigate to the same URL while passing a query string

Contrast among 17-digit timestamps

Observing a two-way binding in AngularJS directive with the $watch functionality

What causes TypeScript generics to infer varying types when an array member is enveloped?

What is the best way to utilize a variable across all functions and conditions within an asynchronous function in Node.js?

How can I display lowercase am/pm instead of uppercase AM/PM with angularjs date filtering?

Step by step guide on how to get your hands on every aspect of

Divergent behavior of SVG elements in Firefox versus Chrome with HTML5

steps to assign variables to $key and $value for ajax data

a collection of Interface objects

Using JSON.stringify to format data and making an asynchronous $http request

Is there a way to retrieve the watch time of an HTML5 video using PHP without relying on external software?

Discover a keyword located within particular markers

Tips for displaying a loading message during an AJAX request?

Arranging routes in node.js like a pro