how to call function using var name?

Question

I have a div that needs to move to a specific position depending on which dropdown div is clicked. I made a function for each one. the functions names corresponds with the dropdown divs id + "Arrow". I then made a var that got the id name of the clicked dropdown div and added the word arrow, this way it would match the function name. when I tried to use the var to call the function it does not work.

 var arrowName = $(this).attr('id') + "Arrow()";

    function btn1s1Arrow() {$( "#greenArrow" ).animate({top: "203px", left: "291px"}, "normal" );}
    function btn1s2Arrow() {$( "#greenArrow" ).animate({top: "345px", left: "381px"}, "normal" );}
    function btn1s3Arrow() {$( "#greenArrow" ).animate({top: "444px", left: "391px"}, "normal" );}

   //////dont mind this $("#qwrapper .accordionContent2").slideUp('normal'); 
   ////////dont mind this $(this).next().slideDown('normal');

    arrowName();

help would be much appreciated. thanks in advanced... i am so stuck

here is a portion of the code, so what i said actually makes sense http://jsfiddle.net/vrs9j/1/

possible duplicate of [Calling a JavaScript function named in a variable](http://stackoverflow.com/questions/1723287/calling-a-javascript-function-named-in-a-variable) — Bergi, Aug 11 '13 at 18:26

score 3 · Accepted Answer · answered Aug 11 '13 at 18:27

3

Well there is no need for that, you could do this:

var arrowName = $(this).attr('id');

var animProps = {
    btn1s1: [203, 291],
    btn1s2: [345, 381],
    btn1s3: [444, 391]
};

var animProp = animProps[arrowName];
$("#greenArrow").animate({top: animProp[0], left: animProp[1]}, "normal");

answered Aug 11 '13 at 18:27

Esailija

138,174
23
272
326

wow. did exactly what i wanted it to do, with a lot less code. thank you, you're awesome. – wil lkh Aug 11 '13 at 19:17

score 1 · Answer 2 · answered Aug 11 '13 at 18:26

1

You can do something like :

window[arrowName]();

answered Aug 11 '13 at 18:26

putvande

15,068
3
34
50

it's inside a function so the arrow functions aren't scoped to window so this won't work and since the function is bound to a jquery click event 'this' refers to a DOM element instead of the function scope so this[arrowName]() won't work either. you could add the functions to an object and use that same invocation syntax on the object though: var arrows = {//functions}; arrow[arrowName](); That being said, I would go with Esailija's solutions – Hummlas – Markus-ipse Aug 11 '13 at 18:59
Yes, fair enough. Didn't see that the function was within another function. – putvande Aug 11 '13 at 19:04

how to call function using var name?

2 Answers2