Nohana Posted December 1, 2007 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? 'ω' Link to comment Share on other sites More sharing options...
Ingolme Posted December 1, 2007 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") Link to comment Share on other sites More sharing options...
Nohana Posted December 1, 2007 Author 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? Link to comment Share on other sites More sharing options...
Ingolme Posted December 1, 2007 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="";} Link to comment Share on other sites More sharing options...
Nohana Posted December 2, 2007 Author 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="";} Link to comment Share on other sites More sharing options...
Ingolme Posted December 2, 2007 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.} Link to comment Share on other sites More sharing options...
Nohana Posted December 2, 2007 Author 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. ^^ Link to comment Share on other sites More sharing options...
Nohana Posted December 2, 2007 Author 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 Link to comment Share on other sites More sharing options...
Ingolme Posted December 2, 2007 Share Posted December 2, 2007 Try this_onchange="setAmount(this.value)" Link to comment Share on other sites More sharing options...
Reg Edit Posted December 2, 2007 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. Link to comment Share on other sites More sharing options...
Nohana Posted December 2, 2007 Author 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 Link to comment Share on other sites More sharing options...
justsomeguy Posted December 3, 2007 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.