Jquery add.EventListner is not a function Double Click Banners

Question

I have built some HTML5 banners for use with google Double Click. I have 2 CTA's on the banner and so I have used the below code which is a slightly amended version of the original double click code. (I comma seperated 2 ID's rather than use one).

function bgExitHandler(e) {
    Enabler.exit('Click for PI');
}
document.querySelectorAll("#click_for_pi, #found-out-more").addEventListener('click', bgExitHandler, false);

I am however getting the below error in the browser:

TypeError: document.querySelectorAll(...).addEventListener is not a function

This is my first time using Double click and HTML5 banners so I am not quite sure the correct methods.

Answer 1

querySelectorAll returns a collection of matched DOM nodes. You need to iterate over it and bind the event individually on each element.

Returns a list of the elements within the document (using depth-first pre-order traversal of the document's nodes) that match the specified group of selectors. The object returned is a NodeList.

function bgExitHandler(e) {
    Enabler.exit('Click for PI');
}
var els = document.querySelectorAll("#click_for_pi, #found-out-more");

for (var i = 0; i < els.length; i++) {
    els[i].addEventListener('click', bgExitHandler, false);
}