Why can't I point to properties of an object from a method of the same object with 'this' keyword on click events [duplicate]

[beatyoSelf]

When i click on the button, the product name disappears, and the numberical, boolean values disappear.

const product =
{
    name:'Gummy Bears',
    inStock:true,
    price:1.99,
    flavors:["grapes","apple","cherry"],

    printProduct: function () {
        const self = this;
        console.log(self)
        document.querySelector('.name').innerHTML = self.name;
        document.querySelector('.instock').innerHTML = this.inStock;
        document.querySelector('.price').innerHTML = this.price;
        document.querySelector('.flavors').innerHTML = this.flavors[0];
    }

}

// product.printProduct()

 document.getElementById('button').addEventListener('click', product.printProduct)