I want to create tabs on pure js and decided to implement it through "data-attr".

var allTabs = document.querySelectorAll('.tab'); //all tabs on page

var clickTabHandler = function (event) {

    var target = event.target;

    var id = target.getAttribute('data-content');

    alert(id);

};

for (var i = 0; i < allTabs.length; i++) {
    allTabs[i].onclick = clickTabHandler(event);
}

in the console get : Uncaught TypeError: Cannot read property 'target' of undefined;

Why?

I want to create tabs on pure js and decided to implement it through "data-attr".

var allTabs = document.querySelectorAll('.tab'); //all tabs on page

var clickTabHandler = function (event) {

    var target = event.target;

    var id = target.getAttribute('data-content');

    alert(id);

};

for (var i = 0; i < allTabs.length; i++) {
    allTabs[i].onclick = clickTabHandler(event);
}

in the console get : Uncaught TypeError: Cannot read property 'target' of undefined;

Why?

• javascript

• 2 where is that loop called? you are immediately invoking clickTabHandler – Daniel A. White Commented Mar 10, 2016 at 11:48

1 Answer 1

replace this line

allTabs[i].onclick = clickTabHandler(event);

by

allTabs[i].onclick = clickTabHandler;

since this and event will be passed to it implicity