How can I show a euro or other HTML entity in JavaScript alert windows?

Front End Technology Javascript Web Development

This tutorial will teach us to show a euro or HTML entity in JavaScript alert Window. There are three pop-up windows in JavaScript. Alert box, Confirm box, and Prompt box.

The alert box is useful to show some information to the user, such as a welcome message or user’s info. It contains the ok button, and when the user clicks on that, it closes.

The confirm box is used to show the confirmation message. In many applications, you have seen that when you try to delete something, it shows the confirmation message. When you click on the ok, it returns true, and if you click on the cancel button, it returns false. So, there can be a lot of use for the confirmation box.

The prompt box is useful for taking the input from the user using the pop-up box.

Using any of the three default pop-up boxes will not allow the user to add anything rather than text. So, we should have a special strategy to add euro icons and other entities to the pop-up box.

In HTML 5, there are some special characters such as euro, dollar, rupees, not equal to symbol, etc. To show these icons in the HTML, we can use the HTML entity, which is the address code for any element the browser recognizes.

Also, we can use the numeric code or hexadecimal code to show the HTML entity in the character format.

Syntax

<script>
   alert('\u20AC'); // using the hexadecimal code
   alert('&#8364'); // using the decimal code
   alert('&euro'); // using the HTML entity
</script>

Here \u20AC is hexadecimal code, @#8364 is decimal code and &euro is HTML entity for euro char.

Example 1

Showing a euro char in the alert box using Hex code

In the below example, we have added the euro char using the hexadecimal code (\u20AC).


<html>
<head>
   <title> Adding euro and other HTML entity to the Alert Box. </title>
</head>
<body>
   <h2> Adding euro and other HTML entity to the Alert Box. </h2>
   <script>
      // showing euro using the hexadecimal code
      alert("The price of the water is \u20AC 20");
      
      // showing euro using the HTML entity
      document.write('The values of app is \u20AC 3000')
      
      // showing euro using the Numeric code
      document.write(' The product price is \u20AC 20')
   </script>
</body>
</html>

In the above output, users can see the euro sign in the alert box. Also, we have rendered the euro sign on the screen.

Example 2

Showing euro in the alert box using the decimal code

In the below example, we have added the euro char using the decimal code (€). We need to add jQuery in our code to show euro char in the alert window. To show euro char in a simple HTML document we need not add jQuery.


<!DOCTYPE html>
<html>
   <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
      </script>
   </body>
      <h3> Adding euro and other HTML entity to the Alert Box. </h3>
      <p id = "demo"> The values of app is € 3000. The product price is € 20.</p>
      <script >
         var encoded = "Demo to show € in alert ";
         var decoded = $("<div/>").html(encoded).text();
         alert(decoded);
      </script>
</html>

Example 3

Adding euro to the alert box using the HTML entity

In the below example, we have added the euro icon using the decimal code (&euro). We need to add jQuery in our code to show euro char in the alert window. To show euro char in simple HTML document we need not to add jQuery.


<!DOCTYPE html>
<html>
   <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
      </script>
   </body>
      <h2> Adding euro and other HTML entity to the Alert Box. </h2>
      <p id = "demo"> The values of app is € 3000. The product price is €  20.</p>
      <script >
         var encoded = "The price of water is € 20. ";
         var decoded = $("<div/>").html(encoded).text();
         alert(decoded);
      </script>
</html>

In the HTML text, users need to add the Hexadecimal code of the character to use the special character or the HTML entity. However, using the numeric code, encoded URI, or HTML entity is also possible. Users can find the HTML entity or Hexadecimal code for any special characters on the internet.

However, users can create a custom alert box and add the image icon for the special character if they want. It is preferred to use characters rather than an icon.

Shubham Vora

Updated on: 10-Aug-2022

770 Views

Kickstart Your Career

Get certified by completing the course

Get Started