Conversion from Decimal to octal, binary and hexadecimal in javascript

前端未结

关注

 5  1473

I have a form where a user enters a decimal number and then from the dropdown menu he chooses if he wants to convert it either to binary, octal or hexadecimal by clicking on a c

相关标签:

5条回答

情书的邮戳

2021-02-08 17:50

Here's some great code I just made to convert between binary, octal, decimal and hexadecimal:

function id(id) {
  return document.getElementById(id);
}
function Convert(s, n) {
  if(parseInt(id(s).value, n)) {
    if("bin" != s) { id("bin").value = parseInt(id(s).value, n).toString(2) }
    if("oct" != s) { id("oct").value = parseInt(id(s).value, n).toString(8) }
    if("dec" != s) { id("dec").value = parseInt(id(s).value, n).toString(10) }
    if("hex" != s) { id("hex").value = parseInt(id(s).value, n).toString(16) }
  } else {
    if("bin" != s) { id("bin").value = "" }
    if("oct" != s) { id("oct").value = "" }
    if("dec" != s) { id("dec").value = "" }
    if("hex" != s) { id("hex").value = "" }
  }
}

<input id="bin" oninput="Convert('bin', 2)" placeholder="bin" spellcheck="false">
<input id="oct" oninput="Convert('oct', 8)" placeholder="oct" spellcheck="false">
<input id="dec" oninput="Convert('dec', 10)" placeholder="dec" spellcheck="false">
<input id="hex" oninput="Convert('hex', 16)" placeholder="hex" spellcheck="false">

Small and simple, perfect for anyone trying to find one of that kind.

0 讨论(0)

清酒与你

2021-02-08 17:57

you can directly convert your values to binary and octal and hexadecimal like this

function Answer() {

    if (document.getElementbyId ('selectid').value=="binary") {
        this.value = this.value.toString(2);
    }
    else if  (document.getElementbyId ('selectid').value=="octal") {
        this.value = this.value.toString(8);
    }
    else if  (document.getElementbyId ('selectid').value=="hexadecimal") {
        this.value = this.value.toString(16);
    }
}

0 讨论(0)

不知归路

2021-02-08 18:03

I see some error

it's not getElementbyId ==> is getElementById, bad use of the context(this) ... in your function Answer (this) is pointing to to the button .. I think you need to change the value on the input, right

try this:

function Answer(e) {
    e.preventDefault();
    var input = document.getElementById('input');
    if (document.getElementById('selectid').value ==="binary") {
        input.value = Number(input.value).toString(2);
    }
    else if  (document.getElementById('selectid').value ==="octal") {
        input.value = Number(input.value).toString(8);
    }
    else if  (document.getElementById('selectid').value ==="hexadecimal") {
        input.value = Number(input.value).toString(16);
    }
}

Note: add id='input' to the input on the HTML part

0 讨论(0)

北恋

2021-02-08 18:06

Decimal to hex/oct/bin:

const hex = (100).toString(16);     // "64"
const oct = (100).toString(8);      // "144"
const bin = (100).toString(2);      // "1100100"

and same backwards:

const dec0 = parseInt("64", 16);     // 100
const dec1 = parseInt("144", 8);     // 100
const dec2 = parseInt("1100100", 2); // 100

0 讨论(0)

抹茶落季

2021-02-08 18:10

If you want to convert a number to hexadecimal representation, you can use toString method. First argument of toString can be a radix for numbers. Example:

var n = 12;
n.toString(); // "c"

If you want to convert back, you can use parseInt...

var hexnum = "c";
parseInt(hexnum,16); // 12

These functions works for any radix.

Here is the full source code:

<html>
   <head>
      <title> Convertor </title>
      <style>
         .panel {
           width:400px;
           height:160px;
           background-color: #E6E6FA;
           border:2px solid blue;  
           font-weight: bold;
           font-size: 110%;   
           margin-left:30px;
           margin-top:15px; 
         }    
         p {
           margin-left: 30px;
           margin-top: 15px;
         }
         form {
           margin-left: 30px;
           margin-top: 15px;
         }
         button {
           margin-left:40px;
           margin-top:10px;
         }
         .answer {
           width:400px;
           height:90px;
           background-color: #E6E6FA;
           border:2px solid blue;  
           font-weight: bold;
           font-size: 110%;   
           margin-left:30px;
           margin-top:15px; 
         }    
         form {
           margin-left: 70px;
           margin-top: 65px;
         }
      </style>
   </head>
   <body>
      <div class="panel">
         <p>
            Enter decimal number to convert, select Base and click   CONVERT.
         </p>
         <input type="text">
         <select id="selectid" name="selectname">
            <option value="binary">Binary</option>
            <option value="octal">Octal</option>
            <option value="hexadecimal">Hexadecimal</option>
         </select>
         <button id="button1" name="Button1">Convert</button>   
      </div>
      <div class="answer" id="answer">
      </div>
      <script>
         var Answer = function(e) {
             var radix;
             var radixStr = document.getElementById('selectid').value;
             var val = parseInt(document.getElementsByTagName("input")[0].value);
             switch(radixStr) {
               case "binary":
                 radix = 2;
                 break;
               case "octal":
                 radix = 8;
                 break;
               case "hexadecimal":
                 radix = 16;
                 break;
             } 

             document.getElementById("answer").innerHTML = val.toString(radix);
             e.preventDefault();
             return false;
          }
         document.getElementById("button1").addEventListener("click",Answer);
         </script>
      </body>
   </html>

0 讨论(0)