Identifying flags that do not actually exist in flag-icon-css library

Please take a moment to review the code snippet provided.

I have created a Datatable that contains countries along with their country codes.

Within my code, I am generating HTML to display flag icons using the format flag-icon-COUNTRYCODE. However, some records contain invalid country codes, resulting in no flag being displayed since there is no corresponding entry in the flag-icon CSS.

Is there a method, possibly using JavaScript, to identify when no flag is displayed for an invalid country code like "XX"?

<link href="https://cdn.bootcss.com/flag-icon-css/2.8.0/css/flag-icon.css" rel="stylesheet"/>

<i class="flag-icon flag-icon-it"> </i>
<i class="flag-icon flag-icon-XX"> </i>
<i class="flag-icon flag-icon-co"> </i>

javascripthtmlcss

Answer №1

Thank you for the solution here.

var ele = document.getElementsByTagName('i');
for(var i=0; i< ele.length; i++){
   var img = ele[i];
   var style = img.currentStyle || window.getComputedStyle(img, false);
   if (style.backgroundImage === 'none'){
      console.log("No Flag Available");
   }
}
<link href="https://cdn.bootcss.com/flag-icon-css/2.8.0/css/flag-icon.css" rel="stylesheet"/>

<i class="flag-icon flag-icon-it"> </i>
<i class="flag-icon flag-icon-XX"> </i>
<i class="flag-icon flag-icon-co"> </i>

By checking for background-image, we can determine if a flag is available or not.

We hope this resolves your issue.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to disregard the data returned from previous AJAX calls?

I've been wondering about a strategy for managing delayed AJAX data returns in a scenario where newer calls should take precedence over earlier ones. For instance, if a first data fetch initiated at 12:01:33 is delayed and comes back at 12:01;39, whil ...

javascriptajaxfetch

Commit to persevering until you achieve success

I'm currently working with native node.js Promises and did not find any useful information in this thread. Essentially, I am dealing with a function that looks like this: var foo = foo (resolve, reject) { return obj .doA() .doB() ...

javascriptnode.jspromise

Angular Cascade of Multiple Requests

I am currently working on a project where I need to develop a service that can take CSV data, convert it into rows, and then make API requests for each row, adding the formatted results to an output string. To explain further, my code (written in Coffeesc ...

javascriptangularjscoffeescriptangular-promiseangular-http

Replacing text in JavaScript: Learn how to substitute a specific word in JavaScript using an array

I need assistance with updating the content of my div using PHP-like functionality. Is there a way to achieve this? <?php $val_1 = array('text_1', 'text_2'); $val_2 = array('text 1', 'text 2'); $replace = str_repl ...

javascript

What is the most effective method for arranging divs in a horizontal layout?

When it comes to creating a horizontal three-column div layout, there are a variety of methods to consider: Position: relative/absolute; Float: left/right; with margin: 0 auto; for center div Float: left; for all divs Display table / table-cell What do ...

javascriptcss

Overlay sliding seamlessly with text scrolling

I just joined this platform and I'm playing around with creating an overlay that slides up with text over an image. However, I'm encountering some issues with the positioning of the overlay. This is part of a responsive gallery where all images h ...

htmlcss

Utilizing Jquery to illuminate the chosen selection from a dropdown menu according to the data retrieved from an AJAX

I have a situation where an ajax request is fetching values from another page. I would like to identify a value that matches the result of the ajax call and have it selected in the <select> tag. Here is the code snippet that I have written so far: ...

javascriptjqueryajax

The result of adding up all Object Keys is a String, rather than the anticipated Number

Can anyone assist me with a coding issue I'm experiencing? My goal is to sum up all the values of an object and store them in a single variable for the total, but it appears that I am concatenating them instead. binance.depth("BNBBTC", (error, depth, ...

javascriptnode.js

Step-by-step guide for importing a JSON file in React typescript using Template literal

I am facing an error while using a Template literal in React TypeScript to import a JSON file. export interface IData { BASE_PRICE: number; TIER: string; LIST_PRICE_MIN: number; LIST_PRICE_MAX: number; DISCOUNT_PART_NUM: Discout; } type Discoun ...

javascriptnode.jsreactjsjsontypescript

Determine the sum of all the values entered into the text fields

On my ASP.Net page, there is a screen where users can select between 1 and 5 text boxes to input an amount. Depending on certain criteria, a specific number of these edit boxes are displayed - no hiding involved. So if I choose to display 3 boxes, only 3 w ...

javascriptasp.net

Is it possible to inject code into HTML using JQuery?

Despite having looked at numerous examples and being aware of the answer to my question, I can't help but feel like I might be missing something. I suspect that the reason this isn't working is because I am running this code locally, rather than ...

jqueryhtmlexternal

How can I toggle the radio button based on the dropdown selection?

I'm attempting to enable or disable a radio button based on the selection from a dropdown menu. View my jsfiddle example here For example, if the user selects "persons" from the dropdown, only the options for Anthony and Paul should be available to ...

javascripthtmljquery

Is the dropdown menu causing issues with the rest of the navigation bar?

While attempting to create my website, I encountered some challenges with the dropdown menu. After following a tutorial on YouTube and making some modifications myself, there seems to be an issue. The screenshot below illustrates that it pulls down the re ...

htmlcss

Troubleshooting the non-functioning collapse feature of Bootstrap 5's "Nav-bar"

Basic code snippet: <?php session_start(); if ((!isset($_SESSION['valid']) == true)) { unset($_SESSION['valid']); header('location:index.php'); } ?> <!DOCTYPE html> <html lang="pt-br"> <h ...

htmlbootstrap-5bootstrap-native

Ways to properly update a state variable when using onClick within a functional component

I'm having an issue with my tabs that are supposed to display different products and filters when clicked. Currently, I have to click each tab twice before the 'options' list updates with the correct filters. I know that calling setOptions w ...

javascriptreactjsreact-hooks

The ng-model binding does not automatically update another ng-model within the same object

Check out this code snippet: http://plnkr.co/edit/aycnNVoD96UMbsC7rFmg?p=preview <div data-ng-app="" data-ng-init="names=['One']"> <input type="text" ng-model="names[0]"> <p>Using ng-repeat to loop:</p> <ul> ...

javascriptangularjs

"An error message stating 'Express: The body is not defined when

I'm encountering an issue while trying to extract data from a post request using express. Despite creating the request in Postman, the req.body appears empty (console.log displays 'req {}'). I have attempted various solutions and consulted s ...

javascriptnode.jsexpress

Firefox causing line-height problem

Having an issue with styling a search button in Firefox. The input submit is created using an iconic font, white background, and border-radius as shown below: display: block; width: 60px; height: 60px; line-height: 60px !important; padding: 0; background: ...

htmlcssgoogle-chromefirefoxicon-fonts

Nested accordions with Bootstrap 4.3 featuring plus and minus icons

I am trying to implement a nested accordion structure that displays plus and minus buttons when opening and collapsing each section. <div style="padding: 10px"> <div class="accordion" id="base-data"> &l ...

htmljquerycssbootstrap-4asp.net-core-mvc

Tips for eliminating white spaces when text wraps onto a new line

Imagine having the following code snippet. Essentially, I have a layout that needs to display 'vs prev period' with a percentage in the same line. To achieve this, I utilized display: flex. The issue arises when we require the gap between the tw ...

javascripthtmlcssreactjs