Javascript problem

Soulstorm · Oct 10, 2008

I have the following code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>

<style type="text/css">

.style1{
	background:#000000;
}

</style>



<script type="text/javascript">
	var originalColor = 0;
	
	function RGBtoHex(R,G,B) {
		return toHex(R)+toHex(G)+toHex(B)
	}
	
	function toHex(N) {
		if (N==null) 
			return "00";
		N=parseInt(N); 
		if (N==0 || isNaN(N)) 
			return "00";
		N=Math.max(0,N); 
		N=Math.min(N,255); 
		N=Math.round(N);
		return "0123456789ABCDEF".charAt((N-N%16)/16) + "0123456789ABCDEF".charAt(N%16);
	}
	
	
	function doLighten(obj){
		originalColor = originalColor - 20;
		txt.value = originalColor;
		obj.style.background = '#' + RGBtoHex(originalColor,originalColor,originalColor);
		
		if(originalColor < 255){
			setTimeout("doLighten(obj)", 30);
		}
		else
			originalColor = 0;
	}
	
	function lighten(obj){
		originalColor = 255;
		obj.style.background = RGBtoHex(originalColor,originalColor,originalColor);
		doLighten(obj);
	}
	

</script>

</head>

<body>


<div class="style1" onmouseover="lighten(this)" >what the...!</div>
<p></p>
<div class="style1" onmouseover="lighten(this)" >what the...!</div>

<textarea id="txt"> </textarea>
</body>
</html>

The purpose is: What I mouse over on any of the two <div> , I want the background to fade out. The way it is now, it stucks after the first call to "doLighten()". It is only being executed once. Can anyone tell me why?

robbieduncan · Oct 10, 2008

As posted it doesn't work for me at all in Firefox. Changing the line in lighten to

Code:

obj.style.background = '#' + RGBtoHex(originalColor,originalColor,originalColor);

get's it working once for each div. Now I just get an error "txt is not defined". This is because having a node with id="txt" does not mean you have a variable with that name that points to that node in JS.

Edit: commenting out the line with txt.value gets us an obj not defined error. This is because of the way you are setting the timeout: obj will be not exist when the timeout next fires...

Edit again: This works, is repeatable and actuals lightens instead of instantly starting light and darkening (as 255,255,255 is white, not black

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>

<style type="text/css">

.style1{
	background:#000000;
}

</style>



<script type="text/javascript">
	var originalColor = 0;
	
	function RGBtoHex(R,G,B) {
		return toHex(R)+toHex(G)+toHex(B)
	}
	
	function toHex(N) {
		if (N==null) 
			return "00";
		N=parseInt(N); 
		if (N==0 || isNaN(N)) 
			return "00";
		N=Math.max(0,N); 
		N=Math.min(N,255); 
		N=Math.round(N);
		return "0123456789ABCDEF".charAt((N-N%16)/16) + "0123456789ABCDEF".charAt(N%16);
	}
	
	
	function doLighten(divID){
		originalColor = originalColor + 20;
		//txt.value = originalColor;
		document.getElementById(divID).style.background = '#' + RGBtoHex(originalColor,originalColor,originalColor);
		
		if(originalColor <255 ){
			setTimeout("doLighten('"+divID+"')", 50);
		}
		else
			originalColor = 255;
	}
	
	function lighten(divID){
		originalColor = 0;
		document.getElementById(divID).style.background = '#' + RGBtoHex(originalColor,originalColor,originalColor);
		doLighten(divID);
	}
	

</script>

</head>

<body>


<div class="style1" onmouseover="lighten('div1')" id="div1">what the...!</div>
<p></p>
<div class="style1" onmouseover="lighten('div2')" id="div2">what the...!</div>

<textarea id="txt"> </textarea>
</body>
</html>

Soulstorm · Oct 10, 2008

I think I get it. So the problem was that the 'obj' variable was released each time the doLighten() was called?

I have another take on your code. This doesn't require setting a different id into each object every time.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>

<style type="text/css">

.style1{
	background:#000000;
}

</style>



<script type="text/javascript">
	var originalColor = 0;
	var currObj = null;
	function RGBtoHex(R,G,B) {
		return toHex(R)+toHex(G)+toHex(B)
	}
	
	function toHex(N) {
		if (N==null) 
			return "00";
		N=parseInt(N); 
		if (N==0 || isNaN(N)) 
			return "00";
		N=Math.max(0,N); 
		N=Math.min(N,255); 
		N=Math.round(N);
		return "0123456789ABCDEF".charAt((N-N%16)/16) + "0123456789ABCDEF".charAt(N%16);
	}
	
	
	function doLighten(){
		originalColor = originalColor + 20;
		//txt.value = originalColor;
		currObj.style.background = '#' + RGBtoHex(originalColor,originalColor,originalColor);
		
		if(originalColor <255 ){
			setTimeout("doLighten()", 50);
		}
		else
			originalColor = 255;
	}
	
	function lighten(divID){
		currObj = divID;
		originalColor = 0;
		currObj.style.background = '#' + RGBtoHex(originalColor,originalColor,originalColor);
		doLighten();
	}
	

</script>

</head>

<body>


<div class="style1" onmouseover="lighten(this)">what the...!</div>
<p></p>
<div class="style1" onmouseover="lighten(this)">what the...!</div>

<textarea id="txt"> </textarea>
</body>
</html>

lazydog · Oct 10, 2008

I don't know if you specifically want to use hex, but you can specify colour using rgb( r,g,b ) which is a bit simpler, eg

Code:

currObj.style.background = "rgb(" + red +"," + green + "," + blue ")"

or at least I think you can!

b en

robbieduncan · Oct 10, 2008

Soulstorm said:
I think I get it. So the problem was that the 'obj' variable was released each time the doLighten() was called?

Not so much released (this is not Cocoa

) but simply not existing any more. If we view obj as a memory address (C style) then it has a valid address when we call lighten and the first time doLighten but then in the setTimeout call we are simply setting the timeout with a string. So the next call to setTimeout is called with a variable obj that no longer exists.

Personally I light giving things IDs: it allows easy access to them by name and uses less global variables...

lazydog · Oct 10, 2008

Hi

Hope you don't mind but I've been tinkering around with your code a bit.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>

<style type="text/css">

.style1{
	background:#000000;
}

</style>



<script type="text/javascript">
	
	function lighten( id )
	{
		var doLighten = function()
		{
			object.style.background = "rgb(" + originalColor +"," + originalColor + "," + originalColor + ")" ;
			
			if( originalColor < 255 )
			{
				originalColor = Math.min( originalColor + 20, 255 ) ;
				setTimeout( doLighten, 30 ) ;
			}
		}
		
		var object = document.getElementById( id ) ;
		var originalColor = 0 ;
		
		doLighten();
	}
	
</script>

</head>

<body>


<div class="style1" onmouseover="lighten('div1')" id="div1">what the...!</div>
<p></p>
<div class="style1" onmouseover="lighten('div2')" id="div2">what the...!</div>

<textarea id="txt"> </textarea>
</body>
</html>

Two things I really like about JavaScript is that it has closures and also functions are objects. So in the above doLighten() has access to the variables object and originalColor.

b e n

Search

Search

Javascript problem

Soulstorm

macrumors 68000

robbieduncan

Moderator emeritus

Soulstorm

macrumors 68000

lazydog

macrumors 6502a

robbieduncan

Moderator emeritus

lazydog

macrumors 6502a

Our Staff