Calling function from string within jQuery [duplicate]

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
– Stephan Weinhold, Commented May 18, 2015 at 3:55
Thanks. I was trying to avoid eval() but I will check to see if I can use it in this case. — blank_kuma
– blank_kuma, Commented May 18, 2015 at 3:59

Arun P Johny · Accepted Answer · 2015-05-18 03:53:01Z

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.

Jerome Nicholas · Accepted Answer · 2015-05-18 03:58:23Z

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, 2015 at 3:58

Jerome Nicholas

114 bronze badges

Comments

zuo · Accepted Answer · 2015-05-26 08:24:41Z

-1

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

edited May 26, 2015 at 8:24

answered May 18, 2015 at 3:52

zuo

1,1111 gold badge12 silver badges27 bronze badges

Collectives™ on Stack Overflow

Calling function from string within jQuery [duplicate]

3 Answers 3

2 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Linked

Related