Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How can I show a euro or other HTML entity in JavaScript alert windows?
This tutorial will teach us to show a euro or other HTML entities in JavaScript alert windows. JavaScript provides three types of pop-up windows: Alert box, Confirm box, and Prompt box.
The alert box displays information to users, such as welcome messages or notifications. The confirm box shows confirmation messages and returns true/false based on user choice. The prompt box collects input from users through a pop-up interface.
Default JavaScript alert boxes only display plain text, so we need special techniques to show currency symbols and other HTML entities. We can use Unicode escape sequences, decimal codes, or HTML entities to display special characters like ?, $, ?, and mathematical symbols.
Syntax
alert('\u20AC'); // using Unicode escape sequence
alert('?'); // direct Unicode character
// For HTML entities in DOM:
element.innerHTML = '€'; // HTML entity
element.innerHTML = '€'; // decimal code
Here \u20AC is the Unicode escape sequence, ? is the direct character, € is the HTML entity, and € is the decimal code for the euro symbol.
Using Unicode Escape Sequences
The most straightforward method is using Unicode escape sequences directly in alert boxes:
<html>
<head>
<title>Adding Euro Symbol to Alert Box</title>
</head>
<body>
<h2>Euro Symbol in Alert Box</h2>
<script>
// Show euro using Unicode escape sequence
alert("The price of water is \u20AC 20");
// Show other currency symbols
alert("Dollar: \u0024 | Yen: \u00A5 | Pound: \u00A3");
// Display on page as well
document.write('<p>App value: \u20AC 3000</p>');
document.write('<p>Product price: \u20AC 20</p>');
</script>
</body>
</html>
This method works directly in alert boxes without requiring external libraries.
Using HTML Entities with jQuery
For HTML entities like €, we need to decode them before displaying in alerts:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
</head>
<body>
<h3>HTML Entity to Alert Box</h3>
<p id="demo">App value: € 3000. Product price: € 20.</p>
<script>
var encoded = "Demo to show € in alert";
var decoded = $("<div/>").html(encoded).text();
alert(decoded);
</script>
</body>
</html>
Using Decimal Codes with jQuery
Decimal HTML codes can also be converted for alert display:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
</head>
<body>
<h2>Decimal Code to Alert Box</h2>
<p>Current prices: € 3000 and € 20</p>
<script>
var encoded = "Water price: € 20";
var decoded = $("<div/>").html(encoded).text();
alert(decoded);
</script>
</body>
</html>
Comparison of Methods
| Method | Works in Alert | Requires Library | Example |
|---|---|---|---|
| Unicode Escape | Direct | No | \u20AC |
| HTML Entity | With jQuery | Yes | € |
| Decimal Code | With jQuery | Yes | € |
Common Currency Symbols
Here are Unicode escape sequences for popular currency symbols:
<script>
alert("Euro: \u20AC"); // ?
alert("Dollar: \u0024"); // $
alert("Yen: \u00A5"); // ¥
alert("Pound: \u00A3"); // £
alert("Rupee: \u20B9"); // ?
</script>
Conclusion
Use Unicode escape sequences like \u20AC for direct display in alert boxes. For HTML entities, decode them using jQuery's .html().text() method before showing in alerts.
2K+ Views
