$(this).attr("id") is returning as undefined inside of a click function

Asked Jan 14 '22 at 14:07

Active Jan 14 '22 at 14:46

Viewed 84 times

const chapterButtons = $(".chapter-button");

chapterButtons.each(() => {
    $(this).click(() => {
        window.location.href = "reading-page.html";
        let chptNum = parseInt($(this).attr("id"));
        sessionStorage.setItem("chptNum", chptNum);
    })
})

The $(this).attr("id") is undefined for all elements even though each element certainly has an id along with the .chapter-button class. I think there is some issue with using $(this) and it is not what I think it is. However, I'm not sure what it should be. I couldn't find someone else having this exact same issue.

Any help would be much appreciated!

asked Jan 14 '22 at 14:07

Void

3

Move the first line of the event handler to the last line of the function, currently the page is redirected before anything has been stored into local storage. – Teemu Jan 14 '22 at 14:11
I am still having the same issue with $(this).attr("id") being undefined. – Void Jan 14 '22 at 14:19
2

Also [this](https://stackoverflow.com/questions/27670401/using-jquery-this-with-es6-arrow-functions-lexical-this-binding) – Rory McCrossan Jan 14 '22 at 14:26
Yep! That solved it! – Void Jan 14 '22 at 14:30

$(this).attr("id") is returning as undefined inside of a click function

0 Answers0