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

Question

I've got the script below

window.addEventListener('DOMContentLoaded', (event) => {
document.querySelectorAll("a[href='example.com']").addEventListener('click',function (e) {
            newrelic.addPageAction('Doc');

        })
    });

I am trying to capture count of hits whenever the user opens the document enclosed within anchor tag with href present but no ID property. The document opens in another window. Is the above correct way to use.

Answer 1

Because querySelectorAll returns a collection of elements, so you should iterate over it ad add the event listener

window.addEventListener('DOMContentLoaded', (event) => {
    [...document.querySelectorAll("a[href^='example.com']")].forEach(el => el.addEventListener('click',function (e) {
            newrelic.addPageAction('Doc');
    }))
});

Answer 2

You need to go through each element returned by querySelectorAll()

window.addEventListener('DOMContentLoaded', (event) => {
    document.querySelectorAll("a[href='example.com']").forEach(el => {
        el.addEventListener('click',function (e) {
            newrelic.addPageAction('Doc');
        });
    });
});