未检测到addEventListerner

Question

我正在尝试构建可扩展面板。我想根据用户选择打开/关闭两个面板。运行以下代码：

const classes = {
  isOpen: ".js-is-open"
};
const selectors = {
  panelTrigger: ".js-expandablePanel__title"
};
function expandablePanel() {
  document.querySelector(selectors.panelTrigger).addEventListener("click", () => { 
    console.log('dfgdfgdf');
    console.log(classes.isOpen);
  });
  console.log(selectors.panelTrigger);
  console.log(classes.isOpen);
}
export { expandablePanel };

出现以下错误：

ExpandablePanel.js:9 Uncaught TypeError: Cannot read property 'addEventListener' of null
at expandablePanel (ExpandablePanel.js:9)
at Object.defineProperty.value (ContentAuthoring.js:13)
at __webpack_require__ (bootstrap 29b82058c7ef95bf1e58:19)
at Object.<anonymous> (main.js:10)
at Object.defineProperty.value (main.bundle.js:53996)
at __webpack_require__ (bootstrap 29b82058c7ef95bf1e58:19)
at Object.defineProperty.value (index.js:12)
at __webpack_require__ (bootstrap 29b82058c7ef95bf1e58:19)
at Object.<anonymous> (formats.js:18)
at __webpack_require__ (bootstrap 29b82058c7ef95bf1e58:19)

我的HTML代码是：

<div class="js-expandablePanel__title">
    <p>
      Demo title 1
    </p>
  </div>

  <div class="js-expandablePanel">
   Demo panel 1
  </div>
   <div class="js-expandablePanel__title">
    <p>
      Demo title 1
    </p>
  </div>

  <div class="js-expandablePanel">
   Demo panel 1
  </div>

你能看出为什么它不喜欢我的addEventListener吗？

Answer 1

你需要一个（。）

const selectors = {
  panelTrigger: ".js-expandablePanel__title"
};