Pass a callback function as a html data attribute

Question

I have created a DOM structure like this

<div data-execute="someFunction.abc" id="someId">
  </div>

I am able to retrive the attribute in js but I intend to execute this as a callback function. So I am doing like this

var x = document.getElementById("someId").getAttribute('data-execute');

As expected this is returning someFunction.abc .But on consoling typeof(x) it is showing "string".Please refer to this fiddle

var someFunction = function() {
  alert("Hello")
}
var load = (function(module, global) {
  var x = document.getElementById("someId").getAttribute('data-execute');
  console.log(typeof(x))

}(load || {}, this))

<div data-execute="someFunction.abc" id="someId">
  Some Function
</div>

I also checked this link Passing a Javascript function through inline data- attributes

But no way I am able to execute it as a call back function.Any help will be truly appreciable.

What is abc? It's a paremeter? – Irvin Dominin Sep 26 '15 at 08:51 — Irvin Dominin, Sep 26 '15 at 08:51

score 2 · Answer 1 · answered Sep 26 '15 at 08:43

2

Try this:

<div data-execute="someFunction.abc" id="someId"></div>

var x = document.getElementById("someId").getAttribute('data-execute');
window[x].call();

answered Sep 26 '15 at 08:43

slash197

9,028
6
41
70

This will work, but without .abc at the end. Not sure should it be parameter, maybe? – sinisake Sep 26 '15 at 09:29

score 2 · Answer 2 · answered Sep 26 '15 at 10:49

You can use the call methodon the function defined in the global scope, you can access it in the global window ojbect.

Ref:

The call() method calls a function with a given this value and arguments provided individually.

I have assumed the code after the point is a paramter to pass to the function.

Code:

var someFunction = function (p) {
    alert(p)
}
var load = (function (module, global) {
    var x = document.getElementById("someId").getAttribute('data-execute');
    window[x.split('.')[0]].call(undefined, x.split('.')[1]);

}(load || {}, this))

Demo: https://jsfiddle.net/IrvinDominin/5bjsmu3x/

score 0 · Answer 3 · answered Jul 06 '23 at 15:49

I was struggling with the same question and I found this solution :

HTML :

<element data-call="return alert('callback');">

JS :

Function(YourElement.getAttribute('data-callback'))();

You can store it in a variable and add parameters too :

HTML :

<element data-call="return str.toUpperCase();">

JS :

var fn = Function("str", YourElement.getAttribute('data-callback'));
var returned = fn("Test String");

Pass a callback function as a html data attribute

3 Answers3