How to instantiate buttons in a HTML table, whose role is to call a JS function in the scope

Question

I'd like to pass a function as parameter in JavaScript, that function is a reference onto a function stored globally

alertHello = function() {
    alert("Hello")
}

for instance, I'd like to create a table from JSON array, which has an actions embedded array.

So I'd like to pass each function stored in actions attribute in my JSON object like this :

{
   ...
   actions : [
      {func : alertHello, icon : myIcon}
   ]
}

So when I create the table, I add a column based on the actions attributes :

    for(var i = 0; i < actions.length ; i++)
    {                
        body += "<button class='ui primary icon button'  onclick="+actions[i].func+"><i class='"+actions[i].icon+" icon'></i></button>";
    }

But I got a "function statement requires a name" error

The way you're trying to do will only work if `actions` is globally available. If so, just ad `()` at the end of the `onclick` button and you got it. — Henrique Barcelos, Nov 26 '16 at 18:51
`actions[i].func` is within a string, so it's a literal, and not evaluated as the value you seem to think it is — OneCricketeer, Nov 26 '16 at 18:51
Yes, It will work, except that the function will be triggered once the page will be loaded — awzx, Nov 26 '16 at 18:52
Possible duplicate of [Pass a JavaScript function as parameter](http://stackoverflow.com/questions/13286233/pass-a-javascript-function-as-parameter) — Martin Schneider, Nov 26 '16 at 18:54
@MA-Maddin The question title of the OP does not really match the real question, so your linked possible duplicate does not answer the actual question. — t.niese, Nov 26 '16 at 18:56
Here's a simple example that will probably help you out: > http://stackoverflow.com/questions/13286233/pass-a-javascript-function-as-parameter — S_alj, Nov 26 '16 at 18:52
thanks @t.niese, I edited my question with something more specific. — awzx, Nov 26 '16 at 20:23

Jack · Answer 1 · 2016-11-26T19:17:06.787

0

I see no definition for body, nor do I think += will work. Additionally, the function should not be wrapped in quotes or with pluses. Try this:

var body = document.getElementsByTagName('body')[0]
for(var i = 0; i < actions.length ; i++) {
    var btn = document.createElement('button');
    btn.className = 'ui primary icon button';
    btn.onclick = actions[i].func();

    var i = document.createElement('i');
    btn.appendChild(i);
    i.className = actions[i].icon;
}

You may also need to add var to your alertHello definition, like this:

var alertHello = function() {
    alert("Hello")
}

Here's a fiddle: https://jsfiddle.net/17ex1ksr/1/

edited Nov 26 '16 at 19:17

answered Nov 26 '16 at 18:57

Jack

804
7
18

You should provide the code with the question itself. Beside that your code does not work, because `testFunc` is `undefined`at the time you create the `funcs` object. – t.niese Nov 26 '16 at 18:59
This will load the function once the table will be instantiated. – awzx Nov 26 '16 at 19:08
What are you referring to? The function is only called `onclick` – Jack Nov 26 '16 at 19:18
In my case, I'm building a table column based on the content of actions, so it's not an alone element in the DOM, once the table is generated, the function will be called – awzx Nov 26 '16 at 19:28

praveenraj · Answer 2 · 2016-11-26T19:35:21.617

0

 for(var i = 0; i < actions.length ; i++)
{                
    body += "<button class='ui primary icon button'  onclick="+actions[i].func+"()><i class="+actions[i].icon+" icon></i></button>";
}

edited Nov 26 '16 at 19:35

answered Nov 26 '16 at 18:57

praveenraj

774
1
9
20

Thanks for it, I'm not sure it could work... But it'll probably be a problem if actions[i].func is undefined ? – awzx Nov 26 '16 at 20:22

score 0 · Accepted Answer · answered Nov 26 '16 at 19:06

Actually, I figured out that a 'wrapping function' was what I was looking for, and I needed to pass the function name as String in the wrapping function this way :

  var actions = [ { func  : 'sayHello', icon  : 'edit' }]

I created a simple wrapping function (notice that this works only on client side) :

wrapFunc = function(func)
{
    var fn = window[func];
    fn();
}

And then when I've to build the table :

body += "... onclick=wrapFunc('"+actions[i].func+"')><i class='"+actions[i].icon+" icon'></i></button>";

Finally, when the page is loaded, the function will only be triggered once I'll click the specific button.

I hope this could help other folks. By the way, my question was not completely relevant.

Exactly, you can also do it this way ! I tested it and it worked flawlessly in my case — awzx, Nov 26 '16 at 19:29
In my specific case, the wrapFunc is necessary, because I need to pass parameters to my functions, these parameters will be processed by the wrapping function. — awzx, Nov 28 '16 at 13:05

score 0 · Answer 4 · answered Nov 26 '16 at 19:44

0

This should work since actions is a global array, however your quotation marks seem to be out of place. So, inside your loop, instead of

<... onclick="+actions[i].func+" ...>

do

<... onclick='actions[" + i + "].func()' ...>`

This will render:

<button onclick='actions[0].func()'> ...
<button onclick='actions[1].func()'> ...
<button onclick='actions[2].func()'> ...

Example: Function as OnClick Parameter.

answered Nov 26 '16 at 19:44

No this will not work, since it'll execute each call on rendering – awzx Nov 26 '16 at 20:20
I updated my question, it's not really in the same context, but thanks anyway! – awzx Nov 26 '16 at 22:31

How to instantiate buttons in a HTML table, whose role is to call a JS function in the scope

4 Answers4