www.webdeveloper.com
Results 1 to 4 of 4

Thread: Refactor this code?

  1. #1
    Join Date
    May 2012
    Posts
    16

    Refactor this code?

    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!

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,633
    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>
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  3. #3
    Join Date
    Mar 2007
    Location
    U.K.
    Posts
    1,127
    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>
    Where used, return should be executed unconditionally and always as the last statement in the function.

    That's my signature, it's not part of the damn post!

  4. #4
    Join Date
    May 2012
    Posts
    16
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles