How to reduce a repetitive javascript function?

Question

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

It's well worth your time to read through the jQuery API docs from beginning to end. It only takes an hour, two at the most, and it gives you all kinds of useful information -- including the answer to this question. :-) — T.J. Crowder
– T.J. Crowder, Commented May 19, 2017 at 17:51

dev8080 · Accepted Answer · 2017-05-19 18:56:13Z

1

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") );
    ....

edited May 19, 2017 at 18:56

answered May 19, 2017 at 18:07

dev8080

4,0051 gold badge15 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

dev8080 Over a year ago

You should put that line right after the code above it, and both these in place of your 'repetitive block', where that line needs to be repeated for all your "fkbtn--" selectors, instead of the entire block.

John Intj Over a year ago

From your code i see that you don't use selectorOne. i tried on my page and without it, it doesn't work.

dev8080 Over a year ago

Edited it: yes I had missed it when I did some edit. 'SelectorOne' is your distanza div selector. It is added now.

John Intj Over a year ago

It almost work. Now something weird happens. When i use more instances, only the last one works the way it should, the issue is in the distance calculations. Please give a look at this fiddle jsfiddle.net/johnhope/ybzhshtn/1

dev8080 Over a year ago

If I remove loadSettings and saveSettings, it shows up fine, except the upper two have shorter lengths to begin with and don't overlap the grey box. For this I changed a CSS rule: .fkbtn01, .fkbtn02, .fkbtn03 input to .fkbtn01 input, .fkbtn02 input, .fkbtn03 input. See jsfiddle.net/camhb38u.

T.J. Crowder · Accepted Answer · 2017-05-19 17:50:33Z

1

Three things:

You can hook multiple events with a single call to .on:
```
$('.reak00').on('focus change', ...
```
You can do more than one thing in an event handler
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.

answered May 19, 2017 at 17:50

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

1 Comment

apires Over a year ago

@JohnIntj, what variables? Element selectors?

Collectives™ on Stack Overflow

How to reduce a repetitive javascript function?

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related