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.

Answer 1

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.

Answer 2

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,
        }
    }()

Answer 3

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.