I am currently working on a project where I need to implement image swatches on a product page. However, I seem to be facing an issue with the code I have used the following code for the image swatches, but it does not seem to be working as expected class ColorName extends HTMLElement { constructor() { super(); this.color = this.parentNode.innerText; this.optionSelects = this.parentNode.parentNode; this.optionSelects.addEventListener( "change", this.colorRender.bind(this) ); THIS.colorRender(); console.log(this); console.log(this.color); console.log(this.optionSelects); } colorRender() { this.selectedColor = document.querySelector( `input[name="Color"]:checked` ).value; this.innerText = this.selectedColor.charAt(0).toUpperCase() + this.selectedColor.slice(1); } } customElements.define("color-name", ColorName); class SizeName extends HTMLElement { constructor() { super(); this.size = this.parentNode.innerText; this.optionSelects = this.parentNode.parentNode; this.optionSelects.addEventListener( "change", this.sizeRender.bind(this) ); THIS.sizeRender(); console.log(this); console.log(this.size); console.log(this.optionSelects); } sizeRender() { this.selectedSize = document.querySelector( `input[name="Size"]:checked` ).value; this.innerText = this.selectedSize.toUpperCase(); this.innerText = this.selectedSize.charAt(0).toUpperCase() + this.selectedColor.slice(1); } } I am unsure of what I am doing wrong here. I have tried reaching out to the original developer for assistance, but have not received a response yet.