Estoy tratando de crear un cajón en mi sitio web de comercio electrónico. Quiero que el cajón se muestre como ninguno cuando ocurra 1 de 3 cosas: hago clic fuera de la sección, presiono Esc o presiono el botón X. Tengo un método que maneja los 3 de ellos. Solo cuando hago clic fuera de la sección, la sección desaparece. Cuando trato de consolarlos al comienzo del método, devuelve lo que espero que me devuelvan. Cuando trato de presionar el botón no pasa nada. Cuando trato de presionar Esc, aparece este error: TypeError no detectado: no se pueden leer las propiedades de undefined (leyendo 'estilo') en HTMLDocument. (main.js:84:27).¿Por qué? Gracias.

 let drawer = { cartDrawer: document.getElementById("cartDrawer"), drawerButton: document.getElementById('closeDrawer'), generateDrawer() { return (this.cartDrawer.innerHTML =this.cartDrawer.innerHTML+ basket .map((x) => { let { id, item } = x let search = shopItemsData.find((y) => y.id === id) || [] return ` <div class='container'> <div class='cartDrawerDetails'> <p><img src=${search.img} alt="" />${search.desc}</p> <div>${search.price}</div> <div class="drawerQuantity"> <i onclick="changeItem.decrement(${id})" class="fa-solid fa-minus"></i> <div class="quantity">${item}</div> <i onclick="changeItem.increment(${id})" class="fa-solid fa-plus"></i></div> </div> <div class='erase' onclick="changeItem.removeItem(${id})">Sterge</div> </div> ` }).join("")) }, closeDrawer() { console.log(this.drawerButton) console.log(this.cartDrawer) //This works document.addEventListener('click', (event) => { const withinBoundaries = event.composedPath().includes(this.cartDrawer) if (!withinBoundaries) {this.cartDrawer.style.display = 'none'} }) //This doesnt works this.drawerButton.addEventListener('click', () => { console.log(this.cartDrawer) this.cartDrawer.style.display = 'none'} ) document.addEventListener('keydown', function(event){ if(event.key === "Escape") { this.cartDrawer.style.display = 'none'} }) }}