470,831 Members | 1,815 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Share your developer knowledge by writing an article on Bytes.

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

Frinavale
9,735 Expert Mod 8TB
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
0 27380

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

2 posts views Thread by Sverre Bakke | last post: by
2 posts views Thread by Mariusz Sakowski | last post: by
15 posts views Thread by jaks.maths | last post: by
5 posts views Thread by Jeff Dillon | last post: by
reply views Thread by mihailmihai484 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.