Nohana 0 Posted December 1, 2007 Report Share Posted December 1, 2007 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? 'ω' Quote Link to post Share on other sites
Ingolme 1,035 Posted December 1, 2007 Report Share Posted December 1, 2007 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") Quote Link to post Share on other sites
Nohana 0 Posted December 1, 2007 Author Report Share Posted December 1, 2007 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? Quote Link to post Share on other sites
Ingolme 1,035 Posted December 1, 2007 Report Share Posted December 1, 2007 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="";} Quote Link to post Share on other sites
Nohana 0 Posted December 2, 2007 Author Report Share Posted December 2, 2007 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="";} Quote Link to post Share on other sites
Ingolme 1,035 Posted December 2, 2007 Report Share Posted December 2, 2007 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.} Quote Link to post Share on other sites
Nohana 0 Posted December 2, 2007 Author Report Share Posted December 2, 2007 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. ^^ Quote Link to post Share on other sites
Nohana 0 Posted December 2, 2007 Author Report Share Posted December 2, 2007 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 Quote Link to post Share on other sites
Ingolme 1,035 Posted December 2, 2007 Report Share Posted December 2, 2007 Try this_onchange="setAmount(this.value)" Quote Link to post Share on other sites
Reg Edit 0 Posted December 2, 2007 Report Share Posted December 2, 2007 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. Quote Link to post Share on other sites
Nohana 0 Posted December 2, 2007 Author Report Share Posted December 2, 2007 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. That seems to work. Many thanks!I'd like to hear why a is not read as a number too. =P Quote Link to post Share on other sites
justsomeguy 1,135 Posted December 3, 2007 Report Share Posted December 3, 2007 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. Quote Link to post Share on other sites
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.