Jump to content

Need a little help with this script ^^


Recommended Posts

function colors() {	r = 255;	g = 0;	b = 0;	speed = 50; //milliseconds	if( r==255	&&	g< 255	&&	b==0	) { g+=5; setTimeOut( "colors()", time ) }; //add green	if( r> 0	&&	g==255	&&	b==0	) { r-=5; setTimeOut( "colors()", time ) }; //reduce red	if( r==0	&&	g==255	&&	b< 255	) { b+=5; setTimeOut( "colors()", time ) }; //add blue	if( r==0	&&	g> 0	&&	b==255 	) { g-=5; setTimeOut( "colors()", time ) }; //reduce green	if( r< 255	&&	g==0	&&	b==255 	) { r+=5; setTimeOut( "colors()", time ) }; //add red	if( r==255	&&	g==0	&&	b> 0 	) { b-=5; setTimeOut( "colors()", time ) }; //reduce blue}function effect() {	document.getElementById(text).style="color: rgb(" + r + "," + g + "," + b + "); cursor: pointer;";}function eraser() {	document.getElementById(text).style="";}

Here's our little boy. Can someone please tell what am I doing wrong? I've tried a bunch of validators out there but they're more confusing than helpful. :)Speaking of which, is there any recommendable one I could get? 'ω'

Link to post
Share on other sites

You don't seem to be calling the function effect() at all.And the variable text isn't defined in the lines with document.getElementById(text)Maybe you mean document.getElementById("text")

Link to post
Share on other sites
You don't seem to be calling the function effect() at all.And the variable text isn't defined in the lines with document.getElementById(text)Maybe you mean document.getElementById("text")
Ok, here's the <body> part:<body onload="colors()"><a id="text" onmouseover="effect()" onmouseout="eraser()">Some Text!</a></body>I didn't post it before as I expected the problem to lie in the script part.I tried to wrap quote marks around the id before but it didn't change anything. ;_;Can't be something with the <a> tag can it?
Link to post
Share on other sites

r, g and b are not global variables, so this script is going to do nothing.But if they were this is what your script would do:When you pass the mouse over "text" it will take a random color.In order to make the script do something, try this:

var r = 255;var g = 0;var b = 0;speed = 50; //millisecondsfunction colors() {	if( r==255	&&	g< 255	&&	b==0	) { g+=5; setTimeOut( "colors()", time ) }; //add green	if( r> 0	&&	g==255	&&	b==0	) { r-=5; setTimeOut( "colors()", time ) }; //reduce red	if( r==0	&&	g==255	&&	b< 255	) { b+=5; setTimeOut( "colors()", time ) }; //add blue	if( r==0	&&	g> 0	&&	b==255	 ) { g-=5; setTimeOut( "colors()", time ) }; //reduce green	if( r< 255	&&	g==0	&&	b==255	 ) { r+=5; setTimeOut( "colors()", time ) }; //add red	if( r==255	&&	g==0	&&	b> 0	 ) { b-=5; setTimeOut( "colors()", time ) }; //reduce blue}function effect() {	document.getElementById(text).style="color: rgb(" + r + "," + g + "," + b + "); cursor: pointer;";}function eraser() {	document.getElementById(text).style="";}

Link to post
Share on other sites

Might have something to do with "speed" and "time". (w)But no, it's not it. It's still not working as it should... Strange, I'm quite sure now that are no possible syntax errors left. Maybe I'm not cut for programming. :)This is what I have now: var r = 255; var g = 0; var b = 0; var speed = 50; //in millisecondsfunction colors() { if( r==255 && g< 255 && b==0 ) { g+=5; setTimeOut( "colors()", speed ) }; //add green if( r> 0 && g==255 && b==0 ) { r-=5; setTimeOut( "colors()", speed ) }; //reduce red if( r==0 && g==255 && b< 255 ) { b+=5; setTimeOut( "colors()", speed ) }; //add blue if( r==0 && g> 0 && b==255 ) { g-=5; setTimeOut( "colors()", speed ) }; //reduce green if( r< 255 && g==0 && b==255 ) { r+=5; setTimeOut( "colors()", speed ) }; //add red if( r==255 && g==0 && b> 0 ) { b-=5; setTimeOut( "colors()", speed ) }; //reduce blue}function effect() { document.getElementById("text").style="color: rgb(" + r + "," + g + "," + b + "); cursor: pointer;";}function eraser() { document.getElementById("text").style="";}

Link to post
Share on other sites

I didn't think it mattered, but just in case, I recommend setting the style individually:function effect() {document.getElementById("text").style.color = "rgb(" + r + "," + g + "," + b + ")"document.getElementById("text").style.cursor ="pointer";}function eraser() {document.getElementById("text").style.color="#000000";//put the default color of the page's text.}

Link to post
Share on other sites

Thanks for the tip! Finally getting somewhere. lol Now the text changes to red, but there's still no color transition... :)[Edit]Never mind, problem solved. There was still one syntax problem with SetTimeOut, which should be SetTimeout.It's working like charm now. ^^

Link to post
Share on other sites

A new problem has arisen. It has to do with variables... I decided to add a little interface feature that lets me change the delay and amount of color change:<script type="text/javascript"><!-- var r = 255; var g = 0; var b = 0; var a = 10; var speed = 50; //in millisecondsfunction colors() { if( r>=255 && g< 255 && b<=0 ) { g+=a; }; //add green if( r> 0 && g>=255 && b<=0 ) { r-=a; }; //reduce red if( r<=0 && g>=255 && b< 255 ) { b+=a; }; //add blue if( r<=0 && g> 0 && b>=255 ) { g-=a; }; //reduce green if( r< 255 && g<=0 && b>=255 ) { r+=a; }; //add red if( r>=255 && g<=0 && b> 0 ) { b-=a; }; //reduce blue t2 = setTimeout( "colors()", speed );}function effect() { document.getElementById("text").style.color="rgb(" + r + "," + g + "," + b + ");"; document.getElementById("text").style.cursor="pointer"; t = setTimeout("effect()", speed);}function eraser() { document.getElementById("text").style.color=""; clearTimeout(t);}function setAmount(x) { a = x;}function setDelay(x) { speed = x; clearTimeout(t2); colors();}//--></script><input type="textarea" maxlength="2" size="1" value="10" onchange="setAmount(value)" /> <b>Amount</b><br /><input type="textarea" maxlength="3" size="1" value="50" onchange="setDelay(value)" /> <b>Delay</b>The setDelay() function is working fine, however, the setAmount() function is giving me a hard time. When I manually change a's value in the script, there are no problems either. It's something specific to the function I'm using. Both functions receive x and attribute it to their respective variable. I really can't see what's wrong with the setAmount() function.Btw, I've already tried adding the other lines that are only present in setDelay() but it doesn't change a thing. Whenever I change the amount value, the whole color transition stops. Any help is highly appreciated. =P

Link to post
Share on other sites

The variable a starts out with a number value of 10, but when set from the textarea it takes on a string value such as "12". Now, if you'd asked me, I would have said that javascript being weakly typed, your colors() function would work just the same with a being 12 or "12". But the fact is, that's actually what's stopping it working! You will see this if you change the code to set a to a number value:

function setAmount(x) {a = x * 1;}

If someone can explain why a string value in a is not treated as a number by colors(), I'd be interested to know the reason.

Link to post
Share on other sites
I'd like to hear why a is not read as a number too.
Because it's a string. Strings and numbers aren't the same thing. You can also do this:
function setAmount(x) {  x = parseInt(x, 10);  if (!isNaN(x))	a = x;}

That will convert the parameter to a number, check if it was a valid conversion, and if so assign the new value to a. If not (if you enter a letter or other non-numeric string), it doesn't do anything.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...