After using an attribute from an Object multiple times, it suddenly appears as undefined when I call it in another function. Even though I have checked its values with console.log and they seem to be assigned correctly. Can anyone help me figure out what I'm doing wrong?
class Tab {
thing: Thing;
thingHistory: ThingHisotry;
response: HttpResponse;
request: HttpRequest;
status: "sending" | "waiting";
element: Element;
constructor() {
// Creating Tab Element
const tabElement = document.createElement('li');
tabElement.classList.add('tagElement');
// Creating Tab Element Wrapper
const tabElementWrapper = document.createElement('div');
tabElementWrapper.classList.add('playNameDiv');
tabElementWrapper.innerHTML = `
<button>
<span class="material-symbols-outlined">play_circle</span>
</button>
<p>${(this.thing) ? this.thing.name : 'Thing 1'}</p>
`;
// Adding Close Button to Tab
const tabCloseBtn = document.createElement('button');
tabCloseBtn.setAttribute('type', 'button');
tabCloseBtn.classList.add('closeTagButton');
tabCloseBtn.innerHTML = `<span class="material-symbols-outlined">close</span>`;
tabCloseBtn.addEventListener('click', this.remove);
tabElement.appendChild(tabElementWrapper);
tabElement.appendChild(tabCloseBtn);
this.element = tabElement; -----> This attribute is set here
console.log(this.element)
}
remove() {
console.log(this.element); // Why does this appear undefined the second time?
this.element.remove(); -------> It's being referenced again but shows as undefined
}
}