array in function name

Question

I'm trying to do a small "opening hours" script in JS. I use timepicker for this and all works fine execept that I want to have a function for each days and I don't want to copy paste it seven times.

This is a part of my code : Call part :

jQuery(document).ready(function() {
    var week = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'];
    for (var i = 0; i < week.length; i++) {
        day = week[i];

        jQuery('#' + day + '_start1').timepicker({
            showLeadingZero: false,
            onHourShow: MondayHourFuncStart,
            //I want to add the day name instead of Monday
            onMinuteShow: MondayMinFuncStart //I want to add the day name instead of Monday
        });
    }

Function part :

week = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'];
for (var i = 0; i < week.length; i++) {

    function MondayHourFuncStart(hour) //I want to add the day name instead of Monday {
    var day = week[i];
    var tpEndHour = jQuery('#' + day + '_end1').timepicker('getHour');
    // all valid if no end time selected
    if (jQuery('#monday_end1').val() == '') {
        return true;
    }
    // Check if proposed hour is prior or equal to selected end time hour
    if (hour <= tpEndHour) {
        return true;
    }
    // if hour did not match, it can not be selected
    return false;
}

So I just want to have the array value instead of "Monday"

I've try many things but I don't find the good solution.

Thanks in advance.

Can you please mention where you want to use the array index instead of the string? — Ravi Y
– Ravi Y, Commented Nov 16, 2012 at 13:51
You have a function declaration in a block. That's invalid to begin with. But then even if it was valid, it doesn't make sense. You're just overwriting the same function in the loop. — I Hate Lazy
– I Hate Lazy, Commented Nov 16, 2012 at 13:53
@user1689607 He wants to create a different function with each iteration, for example, MondayHourFunc, TuesdayHourFunc, etc. It would be better to instead populate an object with properties that contain functions. — user400654
– user400654, Commented Nov 16, 2012 at 13:55
Refactor your code so the function takes the day name as an argument, you don't need different functions. — user1726343
– user1726343, Commented Nov 16, 2012 at 13:55
As I say below : I have 4 functions for each days (func hour start, func hour end, func minutes start and func minutes ends). I don't want to have 28 functions in my document. — Kaherdin
– Kaherdin, Commented Nov 16, 2012 at 14:20

Chad · Accepted Answer · 2012-11-16 13:58:14Z

2

put them in an object:

//object containing all the week's functions
var funcs = {},
    days = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'];

//build the functions for each day
for(var i = 0; i < days.length; i++) {
    funcs[days[i]] = function() {
        //stuffs
    }

    //or for multiple events/functions, something like
    funcs[days[i]] = {
        onHourShow: function() {},
        onMinuteShow: function() {}
    };
}

jQuery(document).ready(function() {
    var week = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'];
    for (var i = 0; i < week.length; i++) {
        day = week[i];

        jQuery('#' + day + '_start1').timepicker({
            showLeadingZero: false,
            onHourShow: funcs[day], //or funcs[day].onHourShow, depending on which you do above
            onMinuteShow: funcs[day]
        });
    }
}

answered Nov 16, 2012 at 13:58

Chad

19.6k4 gold badges54 silver badges75 bronze badges

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

3 Comments

robC Over a year ago

There's a limitation here that within the funcs[days[i]] function, assigning var day = week[i]; won't work.

Chad Over a year ago

@robC yup, OPs code will need to adjust accordingly. I was just demonstrating using an object for the functions as opposed to building global, named functions. You implementation may differ.

Kaherdin Over a year ago

Thanks, for the idear, I will test it a little bit later. Asad's solution works for me now and it has the same concept.

score 1 · Accepted Answer · 2012-11-16 14:25:41Z

1

How about using the function like this:

jQuery('#' + day + '_start1').timepicker({
    showLeadingZero: false,
    onHourShow: FuncStart(day),
    onMinuteShow: FuncStart(day)
});

And then redefining FuncStart to return the appropriate function. For example:

function FuncStart(dayarg){

    //define functions
    function dynamicfunction(hour){
        var day = dayarg;
        var tpEndHour = jQuery('#' + dayarg + '_end1').timepicker('getHour');
        // all valid if no end time selected
        if (jQuery('#' + dayarg + '_end1').val() == '') {
            return true;
        }
        // Check if proposed hour is prior or equal to selected end time hour
        if (hour <= tpEndHour) {
            return true;
        }
        // if hour did not match, it can not be selected
        return false;
    }
    return dynamicfunction;
}

edited Nov 16, 2012 at 14:25

answered Nov 16, 2012 at 13:59

user1726343

3 Comments

Kaherdin Over a year ago

It's a good idea, but I still need to define each function 7 times. And I have 4 functions for each days (func hour start, func hour end, func minutes start and func minutes ends). I don't want to have 28 functions in my document.

user1726343 Over a year ago

@Kaherdin You don't need to redefine the function 7 times. Based on the day, you can make changes to the actual function. So just define one function that has certain details dependent on the value of day and return it.

Kaherdin Over a year ago

Thx !! I think it works, I will do some test and perfect it. Then I will post the result :)

Community · Accepted Answer · 2017-05-23 12:12:22Z

0

By adapting the bracket notation as used to answer String to jQuery.function

You could get it from the current object:

onHourShow: this[day + "HourFuncStart"],

Depending on the scope where the methods are in, you may either have to pass the this where the methods are in, or point to them specifically. But in general, the bracket notation can pick up the function from the string, as methods are just properties of an object.

Though I must say, Chad's answer converts the whole problem to use generalization, which may be a better solution.

edited May 23, 2017 at 12:12

CommunityBot

11 silver badge

answered Nov 16, 2012 at 14:07

René Wolferink

3,5482 gold badges31 silver badges43 bronze badges

Comments

robC · Accepted Answer · 2012-11-16 15:29:41Z

0

Putting them into an object is the best way, but mind that you create the function outside of the loop or store the required index in a closure. Otherwise the value of 'i' will have reached it's maximum by the time you run the function.
In your loop, var day = week[i]; will return undefined because i will have reached week.length.

var fns = {},
    week = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'];

function makeDayFn(i){
    return function(){
        console.log(week[i]);
    }
}

for(var i=0,len=week.length;i<len;i++){
    fns[week[i] + "HourFuncStart"] = makeDayFn(i);
}

fns.mondayHourFuncStart();
fns.tuesdayHourFuncStart();
fns.wednesdayHourFuncStart();

edited Nov 16, 2012 at 15:29

answered Nov 16, 2012 at 14:06

robC

2,7771 gold badge28 silver badges33 bronze badges

Collectives™ on Stack Overflow

array in function name

4 Answers 4

3 Comments

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related