CODEWITHSUNDEEP
javascriptjqueryvariablesduplicates
John Intj
John Intj

Reputation: 7

How to reduce a repetitive javascript function?

i'm a Javascript beginner and now i have something too complex for me to solve. I will have to write this code block HUNDREDS of time, and the only difference will be in these 3 variables, which would change for every code duplicate.

fkbtn01, reak00, buttonf01.

Is there a way to solve this?...Thank you.

JS:

//  START OF REPETITIVE CODING BLOCK
$(document).ready(function(){
    var distanza = $('.fkbtn01');

    $('.reak00').on('focus', function(){
    var posizione = $(this).val(); 
    distanza.css({left:posizione}).animate({
      'left': (posizione *100 / 200)
    });
  });

       $('.reak00').on('change', function(){
    var posizione = $(this).val(); 
    distanza.css({left:posizione}).animate({
      'left': (posizione *100 / 200)
    });
  }); 

     $('.reak00').on('focus', function(){
        r = $('#reak00').val().toString(16);
        var opacityRed = r / 100;        
        $("#buttonf01").css("background-color", "rgba(255,255,255," + opacityRed + ")");
        $("#buttonf01").css("box-shadow", "0 0 25px rgba(255,127,50," + opacityRed + ")");

    });
  });
    $('.reak00').on('change', function(){
        r = $('#reak00').val().toString(16);
        var opacityRed = r / 100;        
        $("#buttonf01").css("background-color", "rgba(255,255,255," + opacityRed + ")");
        $("#buttonf01").css("box-shadow", "0 0 25px rgba(255,127,50," + opacityRed + ")");

    });
//  END OF REPETITIVE CODING BLOCK

Fiddle

Upvotes: 0

Views: 185

Answers (2)

dev8080
dev8080

Reputation: 4020

Assign all of your code into a single function:

    var assignHandlers = function(selectorOne, selectorTwo, selectorThree){
        return function(){

            var distanza = $(selectorOne);
            $(selectorTwo).on('focus change', function(){
                var posizione = $(this).val(); 
                distanza.css({left:posizione}).animate({
                  'left': (posizione *100 / 200)
                });
            });


            $(selectorTwo).on('focus change', function(){
                    r = $(selectorTwo).val().toString(16);
                    var opacityRed = r / 100;        
                    $( selectorThree ).css("background-color", "rgba(255,255,255," + opacityRed + ")");
                    $( selectorThree ).css("box-shadow", "0 0 25px rgba(255,127,50," + opacityRed + ")");

            });
        };
      };

Then use it with the 'changeable factors' as many times as is wanted:

    $(document).ready( assignHandlers('.fkbtn01', '.reak00', "#buttonf01") );
    $(document).ready( assignHandlers('.fkbtn02', '.reak00', "#buttonf01") );
    $(document).ready( assignHandlers('.fkbtn03', '.reak00', "#buttonf01") );
    $(document).ready( assignHandlers('.fkbtn04', '.reak00', "#buttonf01") );
    ....

Upvotes: 1

T.J. Crowder
T.J. Crowder

Reputation: 1074148

Three things:

  1. You can hook multiple events with a single call to .on:

    $('.reak00').on('focus change', ...

  2. You can do more than one thing in an event handler

  3. You can set multiple styles on an element by passing an object to .css

So for instance:

$(document).ready(function() {
    var distanza = $('.fkbtn01');

    $('.reak00').on('focus change', function() {
        //           ^^^^^^^^^^^^--------- two events
        // The first thing
        var posizione = $(this).val();
        distanza.css({
            left: posizione
        }).animate({
            'left': (posizione * 100 / 200)
        });

        // The second thing
        var r = $('#reak00').val().toString(16);
        var opacityRed = r / 100;
        $("#buttonf01").css({ // <==== Object for multiple styles
            "background-color": "rgba(255,255,255," + opacityRed + ")",
            "box-shadow": "0 0 25px rgba(255,127,50," + opacityRed + ")"
        });
    });
});

Side note: Your second change handler was actually outside your ready callback, but your indentation was incorrect and so that wasn't obvious. I've assumed above it was meant to be inside with the others.

Upvotes: 1

Related Questions