Why does my promise function have access to variables inside another function?

Question

First off, sorry for the ugly code I was just trying to figure out how promises work and I accidentally created this. It works, but I'm not sure why.

I attached an event listener to my delete button that shows the modal and creates some variables. Then my promise function references those variables. I'm trying to understand how my promise function can have references to those variables if they are block scoped to my showDeleteModal function?

Here's the code

const deleteBtn = document.querySelector('#deleteBtn');

deleteBtn.addEventListener('click', () => {
  // Not a real modal
  showDeleteModal()
})

function showDeleteModal() {
  // Create variables
  const deleteModal = document.querySelector('#modal');
  const dontDelete = document.querySelector('#dontDelete');
  const yesDelete = document.querySelector('#yesDelete');
  deleteModal.style.display = 'block';
}

const deletionPromise = new Promise((resolved, rejected) => {
  // How am I able to reference them here ?
  yesDelete.addEventListener('click', () => {
    resolved('delete the item')
  })

  dontDelete.addEventListener('click', () => {
    rejected('dont delete item')
  })

})

deletionPromise.then(data => {
  console.log(data);
}).catch(err => {
  console.log(err);
})