Menu
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 convert button. The new answer should be displayed in a new form saying for example: "the number in binary is....". However the code I've done doesn't seem to work. Any help would be highly appreciated. This is the code I have so far:
<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>
<form>
<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" onclick="Answer()"> Convert
</button>
</form>
</div>
<div class="answer">
<form>
</form>
</div>
<script>
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);
}
}
</script>
</body>
273
Given a number and the task is to convert the number from decimal to octal. This can be done by using number. toString(8) method. It takes the parameter which is the base of the converted string.
In decimal to binary, we divide the number by 2, in decimal to hexadecimal we divide the number by 16. In case of decimal to octal, we divide the number by 8 and write the remainders in the reverse order to get the equivalent octal number.
Octal literals start with 0o followed by a sequence of numbers between 0 and 7. Binary literals start with 0b followed by a sequence of number 0 and 1.
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
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.
44
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
