How to change a variable when calling a function with parameters in javascript?

Question

I have a function in my javascript file:

function hoverWidgetOn (param, value) {
    var element = $("*[data-label]"),
    config = {
        'display':'inline',
        'position':'absolute',
        'top':'6.5em',
        'padding' : '0.5em',
        'background-color':'#383838',
        'color':'white',
        'font-size' : '0.8em',
        'opacity' : '0.9',
        'param' : 'value'
    },
    label = $(this).attr("data-label"),
    d = document.createElement('span'),
    t = document.createTextNode(label);

    d.className = "labelShow";
    $(this).append(d);
    $('.labelShow').append(t).css(config);
}

What I want it to do is to add param and value to my variable config when calling function

element.on('mouseenter', hoverWidgetOn('background-color', 'red'))

so the user of this application won't have to change my javascript file in order to change label's look while calling this function in other javascript file, but no matter how I try, this doesn't work... I would be glad if anyone can help me.

Jason P · Accepted Answer · 2013-10-25 15:40:48Z

3

when you do this:

element.on('mouseenter', hoverWidgetOn('background-color', 'red'))

hoverWidgetOn is called immediately.

You can do this:

element.on('mouseenter', function() { 
    hoverWidgetOn.call(this, 'background-color', 'red') 
});

Wrapping in an anonymous function will pass the function instead of executing it, and using call allows you to preserve the context of this.

answered Oct 25, 2013 at 15:40

Jason P

27k3 gold badges34 silver badges45 bronze badges

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

2 Comments

Nephie Over a year ago

Thanks a lot! This worked when combined with config[param] = value;, but the other thing is, that I can only add one pair of param and value. Is there a way to add multiple parameters, so user could change whole look of this label?

Jason P Over a year ago

You could have the parameter be an object similar to your config object. Look into how jquery plugins use $.extend() to set/override defaults.

Yury Tarabanko · Accepted Answer · 2013-10-25 15:42:21Z

2

You can modify your function to take param and value as arguments and return a function that will make an actual changes on mousenter event.

function hoverWidgetOn (param, value){
    return function() {
        var element = $("*[data-label]");
        var config = {'display':'inline',
            'position':'absolute',
            'top':'6.5em',
                'padding' : '0.5em',
            'background-color':'#383838',
            'color':'white',
            'font-size' : '0.8em',
            'opacity' : '0.9'};
        config[param] = value; //add your param

        var label = $(this).attr("data-label"),
        d = document.createElement('span');
        d.className = "labelShow";
        var t = document.createTextNode(label);
        $(this).append(d);
        $('.labelShow').append(t).css(config);
    };
}

answered Oct 25, 2013 at 15:42

Yury Tarabanko

45.1k10 gold badges88 silver badges99 bronze badges

1 Comment

Evan Davis Over a year ago

Could you explain why this works? I know, but I'm guessing OP doesn't.

Rory McCrossan · Accepted Answer · 2013-10-25 17:39:24Z

You can only pass the function reference with the syntax you've got. To pass variables, you need to wrap your call in another function. You can use $.proxy to maintain the scope within that function. Try this:

element.on('mouseenter', function() {
    $.proxy(hoverWidgetOn('background-color', 'red')), this);
});

Also, to add a dynamic key/value to your config object you need to use array notation. In fact you have an odd mix of jQuery and JS in that function. Try this:

function hoverWidgetOn (param, value){
    var element = $("*[data-label]");
    var config = {
        'display': 'inline',
        'position': 'absolute',
        'top': '6.5em',
        'padding' : '0.5em',
        'background-color': '#383838',
        'color': 'white',
        'font-size': '0.8em',
        'opacity': '0.9'
    };
    config[param] = value;

    var label = $(this).attr("data-label"),
        $span = $('<span />', { 
            class = 'labelShow',
            text = label
        }).css(config);

matewka · Accepted Answer · 2013-10-25 15:45:24Z

0

Since you're using jQuery, you can pass custom object to the function, like this:

element.on('mouseenter', {param: 'background-color', value: 'red'}, hoverWidgetOn);

then to access this data:

function hoverWidgetOn(e) {
    var param = e.data.param;
    var value = e.data.value;
    (...)
}

EDIT:
My answer introduced very similiar solution (if not the same) to other answers so I proposed another approach.

edited Oct 25, 2013 at 15:45

answered Oct 25, 2013 at 15:39

matewka

10.2k3 gold badges35 silver badges43 bronze badges

Collectives™ on Stack Overflow

How to change a variable when calling a function with parameters in javascript?

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related