Eyad Syria-lover 1 Posted September 17, 2016 Report Share Posted September 17, 2016 Hello There. I'am Making What It Seems Like A Function To Animate The Background Color Of An Element,But I Have A Problem. This Is The Code: <script> function color(id,duration,r_start,g_start,b_start,r_end,g_end,b_end) { var element=document.getElementById(id); var parameter=setInterval(colorGradually,50*duration); function colorGradually() { if (r_start==r_end && g_start==g_end && b_start==b_end) { clearInterval(parameter); } else { for (var i=r_start,var j=g_start,var k=b_start; i<r_end && j<g_end && k<b_end;i++,j++,k++) { element.style.backgroundColor="rgb("+i+","+j+","+k+")"; } } } } </script> <div id="test" style="width:100%;height:200px;background-color:rgb(128,128,128)"></div> <input type="button" onclick="color('test',1,128,128,128,255,255,255)" value="Change"> The Script Isn't Working At All. I've Checked The Script With Esprisma Code Validator And The Code Was Syntactically Valid,But I Can't Recognize The Problem... Quote Link to post Share on other sites
dsonesuk 913 Posted September 17, 2016 Report Share Posted September 17, 2016 Multiple vars are done var i = r_start, j = g_start, k = b_start; You do not require for loop, as the setInterval() is the loop to create a gradual colour change. Problems with for loop if 'i' for example, but the same happens to all, equals 128 right! i++ will increment to 128 + 128, meaning 2nd loop 'i' will equal 256, NOT much of a gradual change in background colour there? If you want it to increment by 1 you would have to use code similar to i = i + 1; in that case, no for loop is required just i = i + 1; j = j + 1; k = k + 1; preceding element.style.backgroundColor = "rgb(" + i + "," + j + "," + k + ")"; with var listing for these variables outside within the color() function instead. Quote Link to post Share on other sites
dsonesuk 913 Posted September 17, 2016 Report Share Posted September 17, 2016 (edited) Scratch that! Better solution as the if condition won't activate clearInterval() as 'r_start', 'g_start', 'b_start' remain the same value (so it will run continuously even though rgb() will stop incrementing when rgb(255,255,255) is reached, its still looping), in the else condition all you need is r_start = r_start + 1; g_start = g_start + 1; b_start = b_start + 1; var i = r_start, j = g_start, k = b_start; element.style.backgroundColor = "rgb(" + i + "," + j + "," + k + ")"; or remove var i, j, and k completly from background styling, and use 'r_start', 'g_start', 'b_start' instead Edited September 17, 2016 by dsonesuk 1 Quote Link to post Share on other sites
Eyad Syria-lover 1 Posted September 17, 2016 Author Report Share Posted September 17, 2016 (edited) Scratch that! Better solution as the if condition won't activate clearInterval() as 'r_start', 'g_start', 'b_start' remain the same value (so it will run continuously even though rgb() will stop incrementing when rgb(255,255,255) is reached, its still looping), in the else condition all you need is r_start = r_start + 1; g_start = g_start + 1; b_start = b_start + 1; var i = r_start, j = g_start, k = b_start; element.style.backgroundColor = "rgb(" + i + "," + j + "," + k + ")"; or remove var i, j, and k completly from background styling, and use 'r_start', 'g_start', 'b_start' instead In Fact I'am Kind Of Lost. Can You Provide Me With A Code Sir?... I Mean A Modified Copy Of My Code... Edited September 17, 2016 by Eyad Syria-lover Quote Link to post Share on other sites
dsonesuk 913 Posted September 17, 2016 Report Share Posted September 17, 2016 Remove for loop within else, and replace with code in post #3. Quote Link to post Share on other sites
dsonesuk 913 Posted September 17, 2016 Report Share Posted September 17, 2016 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" /> <title>Document Title</title> <script type="text/javascript"> function color(id, duration, r_start, g_start, b_start, r_end, g_end, b_end) { var element = document.getElementById(id); var i = r_start, j = g_start, k = b_start; element.innerHTML = '<h1 style="font-size:4.1vw">wait....wait...</h1>'; var parameter = setInterval(colorGradually, 50 * duration); function colorGradually() { /// With original code! This if condition will never be true and never run clearInterval() , because the original variable values (*_start) never change anywhere in your remaing code? but! i, j, k do change if (i === r_end && j === g_end && k === b_end) { clearInterval(parameter); element.innerHTML = '<h1 style="font-size:4.1vw">The End</h1>'; } else { // for (var i = r_start, j = g_start, k = b_start; i < r_end && j < g_end && k < b_end; i = i + 1, j = j + 1, k = k + 1) // { i = inc_dec_depending_start_and_end(r_start, r_end, i); if (i === r_end) // comment OUT to change rgb value together { j = inc_dec_depending_start_and_end(g_start, g_end, j); }// comment OUT to change rgb value together if (j === g_end)// comment OUT to change rgb value together { k = inc_dec_depending_start_and_end(b_start, b_end, k); }// comment OUT to change rgb value together element.style.backgroundColor = "rgb(" + i + "," + j + "," + k + ")"; // } } } function inc_dec_depending_start_and_end(start, end, value) { if (start < end && value < end) { value += 1; } else if (start > end && value > end) { value -= 1; } else { value = end; } return value; } } </script> <style type="text/css"> </style> </head> <body> <div id="test" style="border: 1px solid red;width:100%;height:200px;background-color:rgb(125,255,0)"></div> <input type="button" onclick="color('test', 1, 125, 255, 0, 65, 0, 255)" value="Change"> </body> </html> Quote Link to post Share on other sites
Eyad Syria-lover 1 Posted September 17, 2016 Author Report Share Posted September 17, 2016 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" /> <title>Document Title</title> <script type="text/javascript"> function color(id, duration, r_start, g_start, b_start, r_end, g_end, b_end) { var element = document.getElementById(id); var i = r_start, j = g_start, k = b_start; element.innerHTML = '<h1 style="font-size:4.1vw">wait....wait...</h1>'; var parameter = setInterval(colorGradually, 50 * duration); function colorGradually() { /// With original code! This if condition will never be true and never run clearInterval() , because the original variable values (*_start) never change anywhere in your remaing code? but! i, j, k do change if (i === r_end && j === g_end && k === b_end) { clearInterval(parameter); element.innerHTML = '<h1 style="font-size:4.1vw">The End</h1>'; } else { // for (var i = r_start, j = g_start, k = b_start; i < r_end && j < g_end && k < b_end; i = i + 1, j = j + 1, k = k + 1) // { i = inc_dec_depending_start_and_end(r_start, r_end, i); if (i === r_end) // comment OUT to change rgb value together { j = inc_dec_depending_start_and_end(g_start, g_end, j); }// comment OUT to change rgb value together if (j === g_end)// comment OUT to change rgb value together { k = inc_dec_depending_start_and_end(b_start, b_end, k); }// comment OUT to change rgb value together element.style.backgroundColor = "rgb(" + i + "," + j + "," + k + ")"; // } } } function inc_dec_depending_start_and_end(start, end, value) { if (start < end && value < end) { value += 1; } else if (start > end && value > end) { value -= 1; } else { value = end; } return value; } } </script> <style type="text/css"> </style> </head> <body> <div id="test" style="border: 1px solid red;width:100%;height:200px;background-color:rgb(125,255,0)"></div> <input type="button" onclick="color('test', 1, 125, 255, 0, 65, 0, 255)" value="Change"> </body> </html> Thank You Very Much Sir...That Worked Just As Expected... 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.