由于已经声明 "undefined" 变量，模态出现错误

Question

我正在通过一些代码来打开和关闭模式。一切都很好，直到最后。模式应该关闭：

单击 "Close" 按钮
单击 "ESC" 键
在模式外单击。

前两个没问题，但最后一个不工作。当我查看控制台时，我收到消息 "Uncaught ReferenceError: $modalContainer is not defined".

但是，

$modalContainer 已在函数的第一行中声明。它已经完成了所有代码，甚至在声明它的函数之外。

我找到了两个解决方法来使其工作，但它们并不是最佳实践：重新声明相同的变量或使用 document.querySelector('#modal-container') 完成工作。

// creates function to exhibit modal
function showModal() {
  var $modalContainer = document.querySelector('#modal-container'); //selects container
    $modalContainer.classList.add('is-visible'); // add visibility class
    }
// function to hide modal
function hideModal() {
  var $modalContainer = document.querySelector('#modal-container'); //selects container
  $modalContainer.classList.remove('is-visible'); //remove visibility class
}

// create event listener to show modal
document.querySelector('#modal-button').addEventListener('click', () => {
  showModal('This is not a headline', 'Here is a detail');
});

    //-- show modal --
function showModal(title, text) {
  var $modalContainer = document.querySelector('#modal-container');
  $modalContainer.innerHTML = '';
  // creates div for modal itself
  var modal = document.createElement('div');
  modal.classList.add('modal');

  // creates button to close modal and activate hideModal()
  var closeButtonElement = document.createElement('button');
  closeButtonElement.classList.add('modal-close');
  closeButtonElement.innerText = 'Close';
  closeButtonElement.innerHTML = "Close"; // new line
  closeButtonElement.addEventListener('click', hideModal); // new line

  // create H1 headline on Modal and message title variable
  var titleElement = document.createElement('h1');
  titleElement.innerText = title;

  // create <p> text on Modal and message text variable
  var contentElement = document.createElement('p');
  contentElement.innerText = text;

  //appends elements closebutton, titleand content to modal
  modal.appendChild(closeButtonElement);
  modal.appendChild(titleElement);
  modal.appendChild(contentElement);
  $modalContainer.appendChild(modal);

  // adds visibility class (?)
  $modalContainer.classList.add('is-visible');
};

// creates ESC shortcut to close modal
window.addEventListener('keydown', (e) => {
  var $modalContainer = document.querySelector('#modal-container');
  if (e.key === 'Escape' && $modalContainer.classList.contains('is-visible')) {
    hideModal();
  }
});

/* 
uncomment variable declaration and the modal closes as expected: with the "ESC" key, clicking on "Close" modal button and clicking outside the modal element.
*/

// var $modalContainer = document.querySelector('#modal-container');

// creates "Close" action by clicking outside modal
$modalContainer.addEventListener('click', (e) => {
  var target = e.target;
  if (target === $modalContainer) {
    hideModal();
  }
});

我可能在这里遗漏了一些简单的东西，但找不到答案。有人可以启发我，以便我了解问题出在哪里吗？为了提供 JavaScript 代码以外的额外背景，我创建了一个代码笔，其中包含所有 HTML、CSS 和 JS：https://codepen.io/gobbet/pen/yLBGpzy

提前致谢

Answer 1

每次您声明 $modalContainer 时，它都在一个函数内，因此它的范围仅限于父函数。在您的 "Close" 操作中，您正在向 $modalContainer 添加一个事件侦听器，就好像它是全局声明的一样，但它并不存在于全局。

Answer 2

全局声明[=11th=]，或者如果不可能（可能是在模态打开时创建的），那么您可以执行以下操作：

document.querySelector('body').addEventListener('click', (e) => { 
  if (e.currentTarget.id == 'modal-container') { 
    hideModal(); 
  } 
});

由于已经声明 "undefined" 变量，模态出现错误

Modal bugged because of "undefined" variable that has already been declared

javascript

variables

modal-dialog