Saeed Posted October 8, 2010 Share Posted October 8, 2010 Good Day,I'm learning JS and CSS; to practice, I wrote a function to loop thru all rgb values and assign them to the backgroundColor property of a div: <script type=text/javascript><html><head><script type="text/javascript">function cs (){ var obj = document.getElementById('t'); var tmp = ["0", "0", "0"]; var a = tmp[0]; var b = tmp[1]; var c = tmp[2]; var clr; for (i=0; i<256; i++){ a = i; for (j=0; j<256; j++){ b = j; for (k=0; k<256; k++){ c = k; clr = "rgb(" + a + ", " + b + ", " + c + ")"; obj.style.backgroundColor = clr; } // end of k } // end of j } // end of i alert (clr); // just to c if it worked} // end of function div{ background-color:#b0c4de;}</script><style type="text/css">div{ background-color:#b0c4de;}</style></head><body><div id="t"> This is a text inside a div element.</div><input type="button" value="color" onClick="cs();"></body></html> This snippet seems to work, albeit very slowly.Here are my questions: Is the code ok? If I use other values for the loop variables, it doesn't seem to work. I put an alert() right b4 the color assignment just to see if the loop works. I used <100 as the break condition and incremented the loop variables by 10. Strange thing happened:the loop repeated itself! The alert box would show (90, 90, 90) and then starts from "0" again.What could be causing this? What is a better alternative for displaying the loop variables while it's looping? document.write() overrides the whole page and stops the loop. I'd like something like:"now displaying the color value abc" to be shown without interrupting the count. Thank you and a good weekend. Link to comment Share on other sites More sharing options...
dsonesuk Posted October 8, 2010 Share Posted October 8, 2010 why not just use loop variables? store the values and then display using innerhtml within a div at end of loops. <script type="text/javascript">/*<![CDATA[*//*---->*/function cs (){var obj = document.getElementById('t');var rgb_code=document.getElementById('rgb_values');//var tmp = ["0", "0", "0"];//var a = tmp[0];//var b = tmp[1];//var c = tmp[2];var clr;var store_values="";for (i=0; i<=250; i+=10) { for (j=0; j<=250; j+=10) { for (k=0; k<=250; k+=10) { clr = "rgb(" + i + ", " + j + ", " + k + ")"; obj.style.backgroundColor = clr; store_values+=clr+"<br />"; } // end of k } // end of j } // end of irgb_code.innerHTML=store_values;alert (clr); // just to c if it worked} // end of function/*--*//*]]>*/</script><div id="t">This is a text inside a div element.</div><input type="button" value="color" onClick="cs();"><div id="rgb_values"></div> Link to comment Share on other sites More sharing options...
Saeed Posted October 8, 2010 Author Share Posted October 8, 2010 Merci beaucoup dsonesuk!That's exactly what I was asking for!Thanks again and have a nice weekend. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.