1

I have the following coded using jQuery:

$('.status-infos').click( function (e) {
    var xx = $(this).attr('data-xx');
    alert(xx);
    return false;
  });

Our site main page will no longer use jQuery and so I need to do something similar to this using only javascript.

I saw this as a way to get the click event:

document.getElementById('element').onclick = function(e){
  alert('click');
}

but how can I get the xx attribute.

Improve this question

5 Answers 5

Reset to default
2

You can use:

document.getElementsByClassName('status-infos')

Then loop over that array and use.. onclick = function() {}

Use: element.getAttribute() to get the data attribute

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

1 Comment

Thanks but how do I do the loop and how can I get the data-xx attribute?
1

Solution for modern browsers:

var els = document.querySelectorAll(".status-infos");
for (var i = 0; i < els.length; i++) {
    els[i].addEventListener("click", function() {
        var xx = this.getAttribute("data-xx");
        alert(xx);
        return false;
    });
}
Improve this answer

4 Comments

@VisionN - Thanks. When you say "modern". How modern do you mean? Will it for example work with IE7 ? Just out of interest, why do you name the variable els ?
@Anne No, IE7 doesn't support addEventListener, it should be replaced with attachEvent. We can define compatibility for IE > 8, while Chrome and Firefox should work fine with it.
@VisionN - Thanks. Is there a way that I could make this work for both IE7 and the modern browsers?
@Anne It is easier to use jQuery then :) The basic idea of jQuery is to provide cross browser compatibility. BTW, els is just elements in short.
1

Here is the complete version for IE8+ as well

DEMO

function getElementsByClassName(className) {
if (document.getElementsByClassName) { 
  return document.getElementsByClassName(className); }
else { return document.querySelectorAll('.' + className); } }

window.onload=function() {
  var statinf = getElementsByClassName("status-infos");
  for (var i=0;i<statinf.length;i++) {
    statinf[i].onclick=function() {
      var xx = this.getAttribute('data-xx');
      alert(xx);
      return false;
    }
  }
}
Improve this answer

2 Comments

So I don't need to add or attach an event listener like the other answers suggest?
Maybe it is easier to use querySelectorAll instead of getElementsByClassName from the start, since the first is supported from IE8, while the second from IE9 only.
0

jQuery has always made developers lazy.. Try this code:

/* http://dustindiaz.com/rock-solid-addevent */
function addEvent(obj, type, fn) {
    if (obj.addEventListener) {
        obj.addEventListener(type, fn, false);
        EventCache.add(obj, type, fn);
    }

    else if (obj.attachEvent) {
        obj["e" + type + fn] = fn;
        obj[type + fn] = function() {
            obj["e" + type + fn](window.event);
        }
        obj.attachEvent("on" + type, obj[type + fn]);
        EventCache.add(obj, type, fn);
    }
    else {
        obj["on" + type] = obj["e" + type + fn];
    }
}
var EventCache = function() {
    var listEvents = [];
    return {
        listEvents: listEvents,
        add: function(node, sEventName, fHandler) {
            listEvents.push(arguments);
        },
        flush: function() {
            var i, item;
            for (i = listEvents.length - 1; i >= 0; i = i - 1) {
                item = listEvents[i];
                if (item[0].removeEventListener) {
                    item[0].removeEventListener(item[1], item[2], item[3]);
                };
                if (item[1].substring(0, 2) != "on") {
                    item[1] = "on" + item[1];
                };
                if (item[0].detachEvent) {
                    item[0].detachEvent(item[1], item[2]);
                };
                item[0][item[1]] = null;
            };
        }
    };
}();
/* http://www.dustindiaz.com/getelementsbyclass */
function getElementsByClass(searchClass,node,tag) {
    var classElements = new Array();
    if ( node == null )
        node = document;
    if ( tag == null )
        tag = '*';
    var els = node.getElementsByTagName(tag);
    var elsLen = els.length;
    var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
    for (i = 0, j = 0; i < elsLen; i++) {
        if ( pattern.test(els[i].className) ) {
            classElements[j] = els[i];
            j++;
        }
    }
    return classElements;
}
var statuss=getElementsByClass('status-infos');
for (var i=0;i<statuss.length;i++){
addEvent(statuss[i], 'click', function (e) {
    var xx = this.getAttribute('data-xx');
    alert(xx);
    return false;
  });
}

Demo | Demo Source

Improve this answer

Comments

0

Use an addEventListener or attachEvent (IE).

var elements = document.getElementByClassName('status-infos');

for(var i=0; i < elements.length; i++) {
   elements[i].addEventListener('click', function(e) {
    ...
    });
}

More info

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.