Eyad Syria-lover Posted September 17, 2016 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... Link to comment Share on other sites More sharing options...
dsonesuk Posted September 17, 2016 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. Link to comment Share on other sites More sharing options...
dsonesuk Posted September 17, 2016 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 Link to comment Share on other sites More sharing options...
Eyad Syria-lover Posted September 17, 2016 Author 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 Link to comment Share on other sites More sharing options...
dsonesuk Posted September 17, 2016 Share Posted September 17, 2016 Remove for loop within else, and replace with code in post #3. Link to comment Share on other sites More sharing options...
dsonesuk Posted September 17, 2016 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> Link to comment Share on other sites More sharing options...
Eyad Syria-lover Posted September 17, 2016 Author 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... Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now