9,735
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
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head></head>
- <body>
- <script type="text/javascript">
- function ConvertToHex(){
- var numberValue = document.getElementById('NumberInput').value;
- var decNumber = Number(numberValue);
- var hexNumber = decNumber.toString(16).toUpperCase();
- document.getElementById('Result').value = hexNumber;
- }
- function ConvertToDec(){
- var hexNumber = document.getElementById('NumberInput').value;
- var decNumber = parseInt(hexNumber,16);
- document.getElementById('Result').value = decNumber;
- }
- </script>
- <div style="text-align:center">
- Number: <input type="text" id="NumberInput"></input>
- Result: <input type="text" id="Result"></input>
- <br/>
- <button onclick="ConvertToHex();">Convert To Hex</button>
- <button onclick="ConvertToDec();">Convert To Decimal</button>
- <br />
- </div>
- </body>
- </html>
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
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head></head>
- <body>
- <script type="text/javascript">
- function ConvertToBinary(){
- var numberValue = document.getElementById('NumberInput').value;
- var decNumber = Number(numberValue);
- var binaryNumber = decNumber.toString(2).toUpperCase();
- document.getElementById('Result').value = binaryNumber;
- }
- function ConvertToDec(){
- var binaryNumber = document.getElementById('NumberInput').value;
- var decNumber = parseInt(binaryNumber, 2);
- document.getElementById('Result').value = decNumber;
- }
- </script>
- <div style="text-align:center">
- Number: <input type="text" id="NumberInput"></input>
- Result: <input type="text" id="Result"></input>
- <br/>
- <button onclick="ConvertToBinary();">Convert To Binary</button>
- <button onclick="ConvertToDec();">Convert To Decimal</button>
- <br />
- </div>
- </body>
- </html>
-Frinny
