Refactor this code?

**WayneISWayne** · 05-18-2012, 02:55 PM

Hello everyone! I am in a pickle when trying to refactor this code:

function fadingthebutton() {
if(effect>0)
{
effect-=70;
document.getElementById("thebutton").style.color="rgb("+effect+","+effect+","+effect+")";
setTimeout(fadingthebutton,70);
}
else {
effect = 255;
}
}

Basically what this code dose is fade a button in and out, creating a blinking effect to agnoliging that you have clicked that button. The problem is that when trying to code less, it dosen't work.

What I want is to fade mulitiple buttons without using the 12-line code in every function called by the button. I am going to use this function maybe 8 times and if you multiplie that by 12 gives us 96 lines of code. When maybe using this code one time in multiple buttons, MAYBE 49 lines.

Hope you understand and I am not a very experienced JavaScript developer, so please explain to me your code.

Thanks for any help!

**Padonak** · 05-19-2012, 07:53 AM

Code:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>WTF</title>
<head>
<script type="text/javascript">
function fadingthebutton(objID,eff){
var obj=document.getElementById(objID);
if(eff>0){
eff-=70;
obj.style.color="rgb("+eff+","+eff+","+eff+")";
setTimeout('fadingthebutton("'+objID+'",'+eff+')',70);
}
else{eff=0;obj.style.color="rgb("+eff+","+eff+","+eff+")";return;}
}
</script>
</head>
<body>
<center>
<input type="button" value="Button 1" id="b1" onclick="fadingthebutton(this.id,255)" /><br /><br />
<input type="button" value="Button 2" id="b2" onclick="fadingthebutton(this.id,255)" /><br /><br />
<input type="button" value="Button 3" id="b3" onclick="fadingthebutton(this.id,255)" />
</center>
</body>
</html>

**Logic Ali** · 05-19-2012, 02:03 PM

Code:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Button</title>
<style>
input[type='button']{ background-color : #000; color : #fff }
</style>
<head>
</head>
<body>

<input type="button" value="Button 1" id="b1" ><br><br>
<input type="button" value="Button 2" id="b2" ><br><br>
<input type="button" value="Button 3" id="b3" >

<script type="text/javascript">

function fadingthebutton( a )
{
  var v = 255, elem = document.getElementById( a ), inUse = false;
  
  elem.onclick = c;
  
  function c(){ if( !inUse )f(); }
  
  function f( )
  {
    if( ( inUse = v > 0 )  )
      setTimeout( f, 70 );
    else
      v = 255;   
      
    v -= Math.min( v, 40 );
        
    elem.style.color = "rgb(" + v + ", " + v + ", " + 255 + ")";    
  }    
}

fadingthebutton( "b1" );
fadingthebutton( "b2" );
fadingthebutton( "b3" );

</script>

</body>
</html>

**WayneISWayne** · 05-19-2012, 04:43 PM

Thank you so much guys - both of you! Made it a lot easier and I overlooked the state of RGB colors and how it worked.

Thread: Refactor this code?

Thread Tools

Display

Refactor this code?

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions