How to make binary to decimal conversion in JavaScript

Conversion between binary and decimal is very easy in JavaScript.  This tutorial will show you how to make a binary to decimal converter and vice versa. But conversion from binary to hexadecimal is just as simple. JavaScript has some nice build in function that making it extremely easy to convert from one numeral system to another.

Binary to decimal converter script

Let first take a look at how you make a binary to decimal converter script:

function convertBinary(){
   var binaryNumber = document.getElementById('binary').value;
   binaryNumber = parseInt(binaryNumber,2);
   var decimalNumber = binaryNumber.toString(10);

First you need to get the input form the user. I assume you have made a input text filed with the ID=”binary” in your HTML.

Then you have to parse that input to an integer. This operation is very basic JavaScript but be aware the second parameter (radix) in the parseInt function. The radix is optional. A number (from 2 to 36) that represents the numeral system to be used. Using 2 as the radix tells JavaScript to parse it into the binary numeral system.

Finally we use JavaScript toString function to convert the number into a string. The parameter 10(again called radix in this function) tells Javascript, that we want to use the decimal numeral system in this conversion.

Now we just need to alert the converted number, and we are done. Very simple and very easy.

Decimal to binary converter script

And here’s how to make a decimal to binary converter script. This conversion is just as simple.

 function convertDecimal(){
   var decimalNumber = document.getElementById('decimal').value;
   decimalNumber = parseInt(decimalNumber);
   var binaryNumber = decimalNumber.toString(2);

This decimal to binary converter script is basically the same as in the above. The only change is that we don’t need the second radix parameter to the parseInt function. JavaScript assume per default that we want to parse to integer using the decimal number system.

How to make a Hexadecimal converter

Just as simple as the 2 above examples. You just need to use the right radix in the 2 JavaScript functions as already explained. the radix in the Hexadecimal numeral system is 16.

Finalization of the converter scripts

Now you just need to put the JavaScript and HTML together. This can be done in a lot of ways. I have made an example of a Binary to Decimal converter. Just right click and choose “view source” to view the code. You are of course welcome to copy the Binary to Decimal converter code and use as a base for your own experiments.

Binary – Decimal resources

Binary numeral system, Decimal numeral system and Hexadecimal numeral system. Great descriptions description of the Binary, Decimal and Hexadecimal numeral system at Wikipedia. Lots of facts about history,  representation, counting and calculating using the numeral systems.

parseInt at W3 schools. W3 schools is a great place to learn basic JavaScript.

Binary to Decimal converter. An example script that makes both Binary to Decimal and Decimal to Binary conversions.

This entry was posted in JavaScript and tagged , , , , , . Bookmark the permalink.

2 Responses to How to make binary to decimal conversion in JavaScript

  1. Man says:

    How can I use this code to make a hexadecimal/decimal/binary converter
    that’s in a table.
    All I need to know is how I can insert the script in an html table.

  2. Niels says:

    Hi Man.

    You should place the binary, decimal or hexadecimal scripts in a script tag in the HTML head section. To call these functions from the HTML table you can use onclick events for example on buttons. Like this:

    <input type=”button” onclick=”convertBinary()” />

    Just put this button in a table cell.

    To also show the converted numbers in the table cell too, you can use innerhtml. Give each table cell a unique ID and use the innerHTML JavaScript function to write the converted binary or decimal into the chosen cells.

Leave a Reply

Your email address will not be published. Required fields are marked *