I am making a browser extension and I want to modify some things on the page but I run into this problem.

Then event listener gets triggered 'plug-stats' is not yet created by script on the page I can't control and gives me undefined so I tried to read it a little bit later but then I run into a problem.

First console log will give me a target as expected but I can't do anything with it yet because 'plug-stats' were not yet created. Second console log gives me null.

Why is this happening and any ideas on how can I fix it?

let perk = document.querySelectorAll('.ItemPerksList-m_plug-O8be3')
perk.forEach(element => {
    element.addEventListener('click', add_perk_description);
});

function add_perk_description(event){
    console.log(event.currentTarget)
    setTimeout(() => {
        console.log(event.currentTarget)
        let html = event.currentTarget.getElementsByClassName('plug-stats')[0]
    }, 1)
}

I am making a browser extension and I want to modify some things on the page but I run into this problem.

Then event listener gets triggered 'plug-stats' is not yet created by script on the page I can't control and gives me undefined so I tried to read it a little bit later but then I run into a problem.

First console log will give me a target as expected but I can't do anything with it yet because 'plug-stats' were not yet created. Second console log gives me null.

Why is this happening and any ideas on how can I fix it?

let perk = document.querySelectorAll('.ItemPerksList-m_plug-O8be3')
perk.forEach(element => {
    element.addEventListener('click', add_perk_description);
});

function add_perk_description(event){
    console.log(event.currentTarget)
    setTimeout(() => {
        console.log(event.currentTarget)
        let html = event.currentTarget.getElementsByClassName('plug-stats')[0]
    }, 1)
}

• javascript
• addeventlistener

Share Improve this question Follow edited Jun 1, 2021 at 16:08 XB BX asked Jun 1, 2021 at 13:42 XB BXXB BX 8888 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

This is expected behaviour, the documentation for Event.currentTarget actually mentions this:

The value of event.currentTarget is only available while the event is being handled. If you console.log() the event object, storing it in a variable, and then look for the currentTarget key in the console, its value will be null.

The while the event is being handled part should essentially be read as synchronously within the event hanlder function as I understand.

https://developer.mozilla/en-US/docs/Web/API/Event/currentTarget

You could still keep a reference to the current target for instance by synchronously assigning it to a local variable - and then referring to this local variable in the setTimeout() callback function.

function add_perk_description(event){
    console.log(event.currentTarget)
    let currentTarget = event.currentTarget
    setTimeout(() => {
        console.log(currentTarget)
        let html = currentTarget.getElementsByClassName('plug-stats')[0]
        }
    }, 1)
}

try this code pass the event as parameter to settimeout-

function add_perk_description(e){
    console.log(e.target)
    setTimeout(function(event) {
        console.log(event.target)
    },500, e);
}

Second Console gives you a NULL because event.currentTarget return a valid value at the time of being handled but callback runs after a 1 milliSeconds that's the reason it shows Null.

Try out this

let perk = document.querySelectorAll('.ItemPerksList-m_plug-O8be3')
    perk.forEach(element => {
        element.addEventListener('click', e => {
            add_perk_description(e)
        })
    })

    function add_perk_description(event){
        console.log(event.currentTarget);
        **let {currentTarget}=e;**
        setTimeout(() => {
            console.log(currentTarget);
            let html = e.currentTarget.getElementsByClassName('plug-stats')[0]
            }
        }, 1)
    }