Calling function from string within jQuery

Question

I am trying to assign a string as the name of a function within the jQuery code but there is something wrong with what I am doing. In the code below, I am passing name="hello" as the function name and msg="hello world!" as the argument. I am trying to call the hello(msg) function. Any help will be appreciated.

http://jsfiddle.net/7jhveokn/

HTML

`<input type="button" value="Click me!">`

CSS

input{
    width: 100px;
}

jQuery

$(document).ready(function(){

$('input').click(function(){
    var name = 'hello';
    var msg = 'hello world!';
    window[name](msg);
});

function hello(msg){
    alert(msg);
}
});

First of all: this is not a jQuery- but a JS-question. Ad your problem: `eval` is pure evil but it will be your friend here. — Stephan Weinhold, May 18 '15 at 03:55
Thanks. I was trying to avoid eval() but I will check to see if I can use it in this case. — blank_kuma, May 18 '15 at 03:59

score 7 · Accepted Answer · answered May 18 '15 at 03:53

You have defined the method hello with the closure of the dom ready handler, so it won't be a property of the window object, only global variables/function are accesible as property of window object.

So either assign it as a property of the window object

$(document).ready(function() {

  $('input').click(function() {
    var name = 'hello';
    var msg = 'hello world!';
    window[name](msg);
  });

  window.hello = function hello(msg) {
    alert(msg);
  }
});

input {
  width: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="button" value="Click me!">

Or define it outside of the closure

$(document).ready(function() {
  $('input').click(function() {
    var name = 'hello';
    var msg = 'hello world!';
    window[name](msg);
  });
});

function hello(msg) {
  alert(msg);
}

input {
  width: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="button" value="Click me!">

But a more appropriate approach could to use a different object than the window object like

$(document).ready(function() {

  $('input').click(function() {
    var name = 'hello';
    var msg = 'hello world!';
    fns[name](msg);
  });

  var fns = {};
  fns.hello = function hello(msg) {
    alert(msg);
  }
});

input {
  width: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="button" value="Click me!">

Thanks. I understand why I can't call the window object anymore. I just have to assign it to a different object. — blank_kuma, May 18 '15 at 04:00

score 0 · Answer 2 · answered May 18 '15 at 03:58

0

$(document).ready(function(){

$('input').click(function(){
    var name = 'hello';
    var msg = 'hello world!';
    //window[name](msg);
    eval(
        'function '+name+'(msg){ alert(msg); }');
    );

});

});

answered May 18 '15 at 03:58

Jerome Nicholas

11
4

zuo · Answer 3 · 2015-05-26T08:24:41.543

-1

window.hello = function(msg) {
  alert(msg);
};

edited May 26 '15 at 08:24

answered May 18 '15 at 03:52

zuo

1,061
1
12
27

Calling function from string within jQuery

3 Answers3