Can you give the javascript function name as an html attribute?

Question

Is it possible to write an html attribute that will store the name of the javascript function, and then extract this val () and execute this function? Example:

<button id="example" data-function-name="showAllElements()"> 

and then in js / jq

 fn = $('#example').data('function-name'); fn; 

Answer 1

You can, yes. Are you another question to which the answer is almost certainly “no” (in terms of line execution, in terms of the alternative shown below, this is sometimes useful).

The way you evaluate this piece of code (what you have is not just a function name, due to () ) is to use the scary eval :

 eval(fn); 

Almost always a better option than using eval . (See below.)

eval example:

 $("#example").on("click", function() { var fn = $("#example").attr("data-function-name"); eval(fn); }); function showAllElements() { alert("showAllElements was called"); } 

 <button type="button" id="example" data-function-name="showAllElements()">Click Me</button> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

---

One of the best options is to save function references as object properties, and then use notes in brackets to get a function reference based on the function name:

Example:

 var functions = { showAllElements: function() { alert("showAllElements was called"); } }; $("#example").on("click", function() { var fn = $("#example").attr("data-function-name"); functions[fn](); }); 

 <button type="button" id="example" data-function-name="showAllElements">Click Me</button> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

Please note that there I just save the function name, not arbitrary code.

Update : see canon answer for a clever way to handle if you have your own functions nested inside an object, for example. mumble.foo.doSomething using reduce . ( reduce is an ES5 function, but it is multicompleted.)

---

Note: if you are not doing something more than just data-* value of the data-* attribute, do not use data , use attr . data initializes the data cache for an element, reads in all data-* attributes for that element, and copies them into the cache. If you do not use it, there is no reason for this. The idea of ​​using data to access data-* attributes is a common misconception.

Answer 2

Of course ... assuming showAllElements is global ...

 function showAllElements() { console.log("test!"); } document.querySelector("button").addEventListener("click", function(e) { var functionName = this.getAttribute("data-function-name"); window[functionName](); }); 

 <button id="example" data-function-name="showAllElements">x</button> 

Now let's say that your attribute is actually something like: foo.bar.showAllElements ...

 var foo = { bar: { showAllElements: function() { console.log("test!"); } } }; document.querySelector("button").addEventListener("click", function(e){ var functionName = this.getAttribute("data-function-name"); // Split by "." and resolve each segment starting at the window. Invoke with () functionName.split(".").reduce((o,n) => o[n], window)(); }); 

 <button id="example" data-function-name="foo.bar.showAllElements">x</button> 

Answer 3

Although I do not think that you can do this using the HTML attribute directly (with the exception of the global functions described above), if you can add a data item with javascript when the page loads, you can do it directly. As said here, jquery $.data() does not match the data-* attributes. According to jQuery docs , the value stored with .data() "The new data value, it can be any type of Javascript except undefined".

This way you can store the function directly using

 function my_func(){ // Do stuff } $(function(){ $('#foo').data('func', my_func); }); 

And then later

 var func = $('#foo').data('func'); if( $.isFunction( func ) ) { func.call( $('#foo'), somearg ); } 

I have an example like a violin .

This has the advantage that you can have functions in cabinets, etc., as long as you add them to elements within the same scope.