Retrieve custom html attributes in javascript function. No jquery please

Question

I have created a button as

<button type="button"  name="createTask" id="createTaskNOw" class="createButton" createtype="task" onclick="components.init(this)" >Add Task</button>

I also have an external javascript file which have this component.init method where I want to retrieve the custom attribute. So I am doing the following

var components = function(){
    var _init = function(attributes){
        console.log("Method Executing:Compnents.init",attributes.createtype);
            }   
    return {
        init:_init,
        }
    }()

When I am logging attributes like name or id I can see the expected result but logging createtype is showing undefined. Is there anything wrong in custom attributes.

That creates invalid HTML. You should be using custom data attributes for this. — C3roe
– C3roe, Commented Feb 15, 2015 at 1:45

score 2 · Accepted Answer · 2015-02-15 01:57:29Z

2

You can retrieve attributes with the Element.getAttribute() function.

Here's a working example snippet:

var div = document.getElementById('test');
div.innerHTML = div.getAttribute('data-val'); //returns a string

<div id="test" data-val="5"></div>

This will place 5 within the <div> element. Working example on JSFiddle.

edited Feb 15, 2015 at 1:57

answered Feb 15, 2015 at 1:44

user3886234

Sign up to request clarification or add additional context in comments.

4 Comments

Andreas Over a year ago

.getAttribute(...) will yield the string "5" and not the number as .dataset.val would do - HTML5 Custom Data Attributes (data-*)

user3886234 Over a year ago

True, but dataset has odd compatibility with IE 9 & 10. It's supported in 11+, though.

Oriol Over a year ago

@Andreas Yes, dataset is better. But I don't think it converts to a number. dataset returns a DOMStringMap, which is a map of DOMStrings, which are Strings in JavaScript.

Andreas Over a year ago

@Oriol You're right. I've only used it lastly with jQuerys .data() which tries to convert the value to the correct type... - jsfiddle.net/6u3ucc6q

Santiago Hernández · Accepted Answer · 2015-02-15 01:49:58Z

1

try replacing attributes.createtype with attributes.getAttribute('createtype') in your function

var components = function(){
    var _init = function(attributes){
        console.log("Method Executing:Compnents.init", attributes.getAttribute('createtype'));
            }   
    return {
        init:_init,
        }
    }()

answered Feb 15, 2015 at 1:49

Santiago Hernández

5,6762 gold badges27 silver badges34 bronze badges

Comments

Leo · Accepted Answer · 2015-02-15 02:08:53Z

1

Your current approach is a bit old school. I recommend you adopt HTMLElement.dataset, which is designed for custom attributes in HTML5.

It looks like:

<button type="button" data-createtype="task">Add Task</button>

You can get and set the attribute with JS:

var button = document.querySelector('button');
console.log(button.dataset.createtype); // task
button.dataset.createtype='announce';
console.log(button.dataset.createtype); // announce

As of @jfriend00 mentioned, this feature is only partially supported on IE10 and below. In that case you could shim it with getAttribute() like before.

edited Feb 15, 2015 at 2:08

answered Feb 15, 2015 at 1:59

Leo

13.9k5 gold badges47 silver badges64 bronze badges

1 Comment

jfriend00 Over a year ago

FYI to the OP. dataset requires IE11.

Collectives™ on Stack Overflow

Retrieve custom html attributes in javascript function. No jquery please

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related