Log in

View Full Version : Binary/Hex/Decimal Script - Help


magicyte
07-03-2008, 07:29 PM
I created a hexidecimal background color mechanism that changes decimals into binary, and binary into hexidecimal. Though the hexidecimal output does not work. I have been trying to fix the problem, but I can't. The hexidecimal function is highlighted in the vast code below. Note that there are NO ERRORS!!! There is a part of the code that does what it is told to do, but it isn't what I intended. Here is the code:


<html>
<head>
<script language="JavaScript">
var hexy = new Array(16);
hexy[0] = "0";
hexy[1] = "1";
hexy[2] = "2";
hexy[3] = "3";
hexy[4] = "4";
hexy[5] = "5";
hexy[6] = "6";
hexy[7] = "7";
hexy[8] = "8";
hexy[9] = "9";
hexy[10] = "A";
hexy[11] = "B";
hexy[12] = "C";
hexy[13] = "D";
hexy[14] = "E";
hexy[15] = "F";

var r = 0;
var b = 0;
var g = 0;
var b1 = "00000000";
var b2 = "00000000";
var b3 = "00000000";
var hex = "000000";

function b0()
{
document.getElementById('r1').value = r;
document.getElementById('b1').value = b;
document.getElementById('g1').value = g;
d1();
d2();
d3();
ch();
}

function d1()
{
var c1 = 1;
var c2 = 1;
var c3 = 1;
var c4 = 1;
var c5 = 1;
var c6 = 1;
var c7 = 1;
var c8 = 1;
var result = r;

if (result-128 >= 0)
{
c1 = "1";
result -= 128;
}
else
{
c1 = "0";
result = result;
}
if (result-64 >= 0)
{
c2 = "1";
result -= 64;
}
else
{
c2 = "0";
result = result;
}
if (result-32 >= 0)
{
c3 = "1";
result -= 32;
}
else
{
c3 = "0";
result = result;
}
if (result-16 >= 0)
{
c4 = "1";
result -= 16;
}
else
{
c4 = "0";
result = result;
}
if (result-8 >= 0)
{
c5 = "1";
result -= 8;
}
else
{
c5 = "0";
result = result;
}
if (result-4 >= 0)
{
c6 = "1";
result -= 4;
}
else
{
c6 = "0";
result = result;
}
if (result-2 >= 0)
{
c7 = "1";
result -= 2;
}
else
{
c7 = "0";
result = result;
}
if (result-1 >= 0)
{
c8 = "1";
result -= 1;
}
else
{
c8 = "0";
result = result;
}
b1 = c1 + c2 + c3 + c4 + c5 + c6 + c7 + c8;
document.getElementById('binary1').innerHTML=b1;
}

function d2()
{
var c1 = 1;
var c2 = 1;
var c3 = 1;
var c4 = 1;
var c5 = 1;
var c6 = 1;
var c7 = 1;
var c8 = 1;
var result = b;

if (result-128 >= 0)
{
c1 = "1";
result -= 128;
}
else
{
c1 = "0";
result = result;
}
if (result-64 >= 0)
{
c2 = "1";
result -= 64;
}
else
{
c2 = "0";
result = result;
}
if (result-32 >= 0)
{
c3 = "1";
result -= 32;
}
else
{
c3 = "0";
result = result;
}
if (result-16 >= 0)
{
c4 = "1";
result -= 16;
}
else
{
c4 = "0";
result = result;
}
if (result-8 >= 0)
{
c5 = "1";
result -= 8;
}
else
{
c5 = "0";
result = result;
}
if (result-4 >= 0)
{
c6 = "1";
result -= 4;
}
else
{
c6 = "0";
result = result;
}
if (result-2 >= 0)
{
c7 = "1";
result -= 2;
}
else
{
c7 = "0";
result = result;
}
if (result-1 >= 0)
{
c8 = "1";
result -= 1;
}
else
{
c8 = "0";
result = result;
}
b2 = c1 + c2 + c3 + c4 + c5 + c6 + c7 + c8;
document.getElementById('binary2').innerHTML=b2;
}

function d3()
{
var c1 = 1;
var c2 = 1;
var c3 = 1;
var c4 = 1;
var c5 = 1;
var c6 = 1;
var c7 = 1;
var c8 = 1;
var result = g;

if (result-128 >= 0)
{
c1 = "1";
result -= 128;
}
else
{
c1 = "0";
result = result;
}
if (result-64 >= 0)
{
c2 = "1";
result -= 64;
}
else
{
c2 = "0";
result = result;
}
if (result-32 >= 0)
{
c3 = "1";
result -= 32;
}
else
{
c3 = "0";
result = result;
}
if (result-16 >= 0)
{
c4 = "1";
result -= 16;
}
else
{
c4 = "0";
result = result;
}
if (result-8 >= 0)
{
c5 = "1";
result -= 8;
}
else
{
c5 = "0";
result = result;
}
if (result-4 >= 0)
{
c6 = "1";
result -= 4;
}
else
{
c6 = "0";
result = result;
}
if (result-2 >= 0)
{
c7 = "1";
result -= 2;
}
else
{
c7 = "0";
result = result;
}
if (result-1 >= 0)
{
c8 = "1";
result -= 1;
}
else
{
c8 = "0";
result = result;
}
b3 = c1 + c2 + c3 + c4 + c5 + c6 + c7 + c8;
document.getElementById('binary3').innerHTML=b3;
}

function ch()
{
var d1 = b1.charAt(0) + b1.charAt(1) + b1.charAt(2) + b1.charAt(3);
var d2 = b1.charAt(4) + b1.charAt(5) + b1.charAt(6) + b1.charAt(7);
var e1 = b2.charAt(0) + b2.charAt(1) + b2.charAt(2) + b2.charAt(3);
var e2 = b2.charAt(4) + b2.charAt(5) + b2.charAt(6) + b2.charAt(7);
var n1 = b3.charAt(0) + b3.charAt(1) + b3.charAt(2) + b3.charAt(3);
var n2 = b3.charAt(4) + b3.charAt(5) + b3.charAt(6) + b3.charAt(7);
var aa = 0;
var bb = 0;
var cc = 0;
var dd = 0;
var ee = 0;
var ff = 0;
<!-- red -->
for(q = 0; q < 4; q++)
{
if(d1.charAt(q) == "1")
{
if(q = 0)
{
aa+=8;
}
if(q = 1)
{
aa+=4;
}
if(q = 2)
{
aa+=2;
}
if(q = 3)
{
aa+=1;
}
}
else
{
}
}
for(q = 4; q < 8; q++)
{
if(d2.charAt(r) == "1")
{
if(q = 4)
{
bb+=8;
}
if(q = 5)
{
bb+=4;
}
if(q = 6)
{
bb+=2;
}
if(q = 7)
{
bb+=1;
}
}
else
{
}
}
<!-- fin -->
<!-- blue -->
for(q = 0; q < 4; q++)
{
if(e1.charAt(q) == "1")
{
if(q = 0)
{
cc+=8;
}
if(q = 1)
{
cc+=4;
}
if(q = 2)
{
cc+=2;
}
if(q = 3)
{
cc+=1;
}
}
else
{
}
}
for(q = 4; q < 8; q++)
{
if(e2.charAt(q) == "1")
{
if(q = 4)
{
dd+=8;
}
if(q = 5)
{
dd+=4;
}
if(q = 6)
{
dd+=2;
}
if(q = 7)
{
dd+=1;
}
}
else
{
}
}
<!-- fin -->
<!-- green -->
for(q = 0; q < 4; q++)
{
if(n1.charAt(q) == "1")
{
if(q = 0)
{
}
if(q = 1)
{
ee+=4;
}
if(q = 2)
{
ee+=2;
}
if(q = 3)
{
ee+=1;
}
}
else
{
}
}
for(q = 4; q < 8; q++)
{
if(n2.charAt(q) == "1")
{
if(q = 4)
{
ff=8;
}
if(q = 5)
{
ff+=4;
}
if(q = 6)
{
ff+=2;
}
if(q = 7)
{
ff+=1;
}
}
else
{
}
}<!-- fin -->
hex = hexy[aa] + hexy[bb] + hexy[cc] + hexy[dd] + hexy[ee] + hexy[ff];
document.getElementById('hexual').innerHTML=hex;
alert(hex+" "+d1+" "+d2+" "+e1+" "+e2+" "+n1+" "+n2);

}

function change()
{
document.getElementById('bg').style.background=hex;
}

setInterval("change()", 100);
</script>
</head>
<body id="bg" style="background:black;">
<input type="button" value="-" onclick="if(r > 0){r-=1;b0()}"> <input type="text" maxlength="3" id=r1 value="0" style="width:30px;cursor:default;text-align:center;" readonly="readonly"> <input type="button" value="+" onclick="if(r < 255){r+=1;b0()}">
<br />
<input type="button" value="-" onclick="if(b > 0){b-=1;b0()}"> <input type="text" maxlength="3" id=b1 value="0" style="width:30px;cursor:default;text-align:center;" readonly="readonly"> <input type="button" value="+" onclick="if(b < 255){b+=1;b0()}">
<br />
<input type="button" value="-" onclick="if(g > 0){g-=1;b0()}"> <input type="text" maxlength="3" id=g1 value="0" style="width:30px;cursor:default;text-align:center;" readonly="readonly"> <input type="button" value="+" onclick="if(g < 255){g+=1;b0()}">
<br />
<span id="hexual" style="color:white;"></span>
<br />
<span id="binary1" style="color:white;"></span>
<br />
<span id="binary2" style="color:white;"></span>
<br />
<span id="binary3" style="color:white;"></span>
<br />
</body>
</html>

If anyone could help me, I would be VERY happy! Thanks in advance!

-magicyte
jscheuer1
07-04-2008, 08:07 AM
I don't see anything highlighted in the code. However, converting hex to decimal and decimal to hex is relatively simple in javascript, and can be accomplished in a few lines or less. Google it.

Here's the top result BTW:

http://javascript.about.com/library/blh2d.htm

Adding binary to it should be rather simple.
jscheuer1
07-04-2008, 06:13 PM
I played around with this idea and came up with this simple version (and a more complex one), but here's the simple one:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Number Conversion Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function d2h(d) {return (d - 0).toString(16);}
function d2b(d) {return (d - 0).toString(2);}
function h2d(h) {return parseInt(h,16);}
function h2b(h) {return parseInt(h,16).toString(2);}
function b2d(b) {return parseInt(b,2);}
function b2h(b) {return parseInt(b,2).toString(16);}
function doit(el){
var how = el.value, n = el.form.elements['num'];
n.value = eval(how)(n.value);
}
</script>
</head>
<body onload="document.forms[0].elements['num'].value = 255;">
<form action="javascript:void(0);" onsubmit="return false;">
<div>
Enter a number (or use existing value):<br>
<input size=50 name="num" type="text" value="255"><br>
<input type="button" value="d2h" onclick="doit(this);">
<input type="button" value="d2b" onclick="doit(this);">
<input type="button" value="h2d" onclick="doit(this);">
<input type="button" value="h2b" onclick="doit(this);">
<input type="button" value="b2d" onclick="doit(this);">
<input type="button" value="b2h" onclick="doit(this);">
</div>
</form>
</body>
</html>
magicyte
07-05-2008, 12:16 AM
Thank you so very much! Could you list the more complexed one? Thanks in advance!

-magicyte
jscheuer1
07-05-2008, 12:45 AM
Sure, and I think it could be refined more (I'm thinking of another set of button inputs or a select element that selects the initial type of number - it currently defaults to a decimal, though once you convert to another type, it will accept that type as input - ideally I would like a way to detect the type of number input onkeyup or something like that, but that may not be possible due to the way numbers as text values can be in any base that supports their digit set), and it certainly could be bent to some other particular purpose.

However, be aware that in NN4 (I only mention this because other posts of yours in other threads indicate that you still use NN4), although it degrades gracefully, the full feature set of this 'advanced' version is not available due to limitations of that browser. The full feature set is available in IE 4 though, as well as in virtually any modern browser.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Number Conversion Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function d2h(d) {return (d - 0).toString(16);}
function d2b(d) {return (d - 0).toString(2);}
function h2d(h) {return parseInt(h,16);}
function h2b(h) {return parseInt(h,16).toString(2);}
function b2d(b) {return parseInt(b,2);}
function b2h(b) {return parseInt(b,2).toString(16);}
function doit(el){
var kinds = {b:'binary', d:'decimal', h:'hexadecimal'}, how = el.value,
n = el.form.elements['num'], k = how.charAt(2), e = new RegExp('^' + k);
if(document.getElementById)
document.getElementById('kind').firstChild.nodeValue = kinds[k];
else if (document.all) document.all['kind'].innerHTML = kinds[k];
for (var b = el.form.elements, i = b.length - 1; i > -1; --i)
if(b[i].type && b[i].type == 'button')
b[i].disabled = !e.test(b[i].value);
n.value = eval(how)(n.value);
}
</script>
</head>
<body onload="document.forms[0].elements['num'].value = 255;">
<form action="javascript:void(0);" onsubmit="return false;">
<div>
Enter a <span id="kind">decimal</span> number (or use existing value):<br>
<input size=50 name="num" type="text" value="255"><br>
<input type="button" value="d2h" onclick="doit(this);">
<input type="button" value="d2b" onclick="doit(this);">
<input type="button" disabled value="h2d" onclick="doit(this);">
<input type="button" disabled value="h2b" onclick="doit(this);">
<input type="button" disabled value="b2d" onclick="doit(this);">
<input type="button" disabled value="b2h" onclick="doit(this);">
</div>
</form>
</body>
</html>
magicyte
07-05-2008, 01:15 AM
Thanks, but I am using IE 6 right now. I program on this other Windows ME computer.

-magicyte

P.S. THANK YOU VERY MUCH!!!!