By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
449,315 Members | 1,736 Online
Bytes IT Community
Submit an Article
Got Smarts?
Share your bits of IT knowledge by writing an article on Bytes.

Converting Hex or Binary to Decimal and Decimal to Hex or Binary JavaScript Example

Frinavale
Expert Mod 5K+
P: 9,731
Convert a Hex number into a decimal number and a decimal number to Hex number

This is a very simple script that converts decimal numbers into hex values and hex values into decimal numbers. The example following this one demonstrates how to convert decimal numbers into binary values.

A hex number is a string that contains numbers between 0-9 and characters A-F; where A = 10, B = 11, ..., F = 15. (For more information please look up (google) Hex numbers.)

With this in mind, it's clear that you need to call the Number Object's toString() method in order to convert a Number into a Hex value. When you call the toString() method simply pass it 16 as a parameter and it will print the number in base 16 (hex).

To convert a hex number into a decimal number you can use the parseInt() method. You pass this method the string containing the hex value as the first parameter and 16 as second parameter to indicate that the string is a base 16 number. This will return you a Number Object that is the decimal (base 10) equivalent to the hex value.

Expand|Select|Wrap|Line Numbers
  1. <html xmlns="http://www.w3.org/1999/xhtml"> 
  2.   <head></head>
  3.   <body>
  4.     <script type="text/javascript">
  5.       function ConvertToHex(){
  6.         var numberValue = document.getElementById('NumberInput').value;
  7.         var decNumber = Number(numberValue);
  8.         var hexNumber = decNumber.toString(16).toUpperCase();
  9.  
  10.         document.getElementById('Result').value = hexNumber;
  11.       }
  12.       function ConvertToDec(){
  13.         var hexNumber = document.getElementById('NumberInput').value;
  14.         var decNumber = parseInt(hexNumber,16);
  15.         document.getElementById('Result').value = decNumber;
  16.       }
  17.     </script>
  18.  
  19.     <div style="text-align:center">
  20.       Number: <input type="text" id="NumberInput"></input>
  21.       Result: <input type="text" id="Result"></input>
  22.       <br/>
  23.       <button onclick="ConvertToHex();">Convert To Hex</button>
  24.       <button onclick="ConvertToDec();">Convert To Decimal</button>
  25.       <br />
  26.     </div>
  27.   </body>
  28. </html>
Convert a Binary number into a decimal number and a decimal number to binary number

This technique can be used to convert numbers into whatever base you want! For example if you want to convert a decimal number into binary you just use base 2 instead of base 16:
Expand|Select|Wrap|Line Numbers
  1. <html xmlns="http://www.w3.org/1999/xhtml"> 
  2.   <head></head>
  3.   <body>
  4.     <script type="text/javascript">
  5.       function ConvertToBinary(){
  6.         var numberValue = document.getElementById('NumberInput').value;
  7.         var decNumber = Number(numberValue);
  8.         var binaryNumber = decNumber.toString(2).toUpperCase();
  9.  
  10.         document.getElementById('Result').value = binaryNumber;
  11.       }
  12.       function ConvertToDec(){
  13.         var binaryNumber = document.getElementById('NumberInput').value;
  14.         var decNumber = parseInt(binaryNumber, 2);
  15.         document.getElementById('Result').value = decNumber;
  16.       }
  17.     </script>
  18.  
  19.     <div style="text-align:center">
  20.       Number: <input type="text" id="NumberInput"></input>
  21.       Result: <input type="text" id="Result"></input>
  22.       <br/>
  23.       <button onclick="ConvertToBinary();">Convert To Binary</button>
  24.       <button onclick="ConvertToDec();">Convert To Decimal</button>
  25.       <br />
  26.     </div>
  27.   </body>
  28. </html>
Happy Coding!


-Frinny
Apr 7 '09 #1
Share this Article
Share on Google+