javascript delegate style to element

Question

I've maded this in jquery that works fine:

$(document).delegate('i', 'click', function(_this){
    console.log(_this.target);
    this.parentElement.firstElementChild.firstElementChild.firstElementChild.style.position = "fixed";
    this.parentElement.firstElementChild.firstElementChild.firstElementChild.style.left = '5px';
    this.parentElement.firstElementChild.firstElementChild.firstElementChild.style.top = '50px';
    this.parentElement.firstElementChild.firstElementChild.firstElementChild.style.width = "200px";
    this.parentElement.firstElementChild.firstElementChild.firstElementChild.style.height = "125px";
});

but I need to make it in pure javascript, NO jquery.

document.addEventListener("click",function(e) {
 if(e.target && e.target.nodeName == "I") {   
    console.log(e.target);
    this.parentElement.firstElementChild.firstElementChild.firstElementChild.style.position = "fixed";
    this.parentElement.firstElementChild.firstElementChild.firstElementChild.style.left = '5px';
    this.parentElement.firstElementChild.firstElementChild.firstElementChild.style.top = '50px';
    this.parentElement.firstElementChild.firstElementChild.firstElementChild.style.width = "200px";
    this.parentElement.firstElementChild.firstElementChild.firstElementChild.style.height = "125px";
 }
});

This does not work... what I'm doing wrong?

Answer 1

Loop through all i's and bind the event on the element.

 Array.prototype.forEach.call(document.querySelectorAll("i"), function (elem) {
     elem.addEventListener("click", function (e) {
         this.parentElement.firstElementChild.firstElementChild.firstElementChild.style.position = "fixed";
         this.parentElement.firstElementChild.firstElementChild.firstElementChild.style.left = '5px';
         this.parentElement.firstElementChild.firstElementChild.firstElementChild.style.top = '50px';
         this.parentElement.firstElementChild.firstElementChild.firstElementChild.style.width = "200px";
         this.parentElement.firstElementChild.firstElementChild.firstElementChild.style.height = "125px";
     });
 })

Delegate version:

 document.addEventListener("click", function (e) {
        if (e.target && e.target.tagName.toLowerCase() == "i") {
            e.target.parentElement.firstElementChild.firstElementChild.firstElementChild.style.position = "fixed";
            e.target.parentElement.firstElementChild.firstElementChild.firstElementChild.style.left = '5px';
            e.target.parentElement.firstElementChild.firstElementChild.firstElementChild.style.top = '50px';
            e.target.parentElement.firstElementChild.firstElementChild.firstElementChild.style.width = "200px";
            e.target.parentElement.firstElementChild.firstElementChild.firstElementChild.style.height = "125px";
        }
    });