未定义JavaScript ReferenceError函数

Question

我有以下功能可以切换div js-show-more-content

<div class="season-list" id="js-show-more-container">

当用户点击具有show-more的类并在开发控制台中执行得很好，但返回Uncaught ReferenceError: showMore is not defined at HTMLParagraphElement.onclick

从外部js文件运行时。我也尝试了SeriesDetail.showMore onClick。

showMore() {
const episodes = document.getElementById("js-show-more-container");
  if(episodes) {
    episodes.style.display = episodes.style.display == "flex" ? "none" : "flex";
  }
}

<p class="show-more" onclick="showMore('js-show-more-container')">SHOW MORE</p>

这是上下文的外部js文件：

const SeriesDetail = {
  seasonItems: undefined,
  keyContainer: undefined,
  keyItems: undefined,

  bindEvents () {
    this.keyContainer.addEventListener('click', (e) => {
      const target = e.target
      const number = (target.dataset && target.dataset.seasonNum) || 1
      this.setSeason(number)
    })
  },

  init () {
    this.keyContainer = document.getElementsByClassName('js-season-key-items')[0]

    const keyItems = this.keyContainer.querySelectorAll('.js-season-key')
    this.keyItems = [...keyItems]

    const seasonItems = document.getElementsByClassName('js-season-list-item')
    this.seasonItems = [...seasonItems]

    const seasonNum = this.getQuery('season') || 1

    this.setSeason(seasonNum)
    this.bindEvents()

    return this
  },

  setSeason (number) {
    this.seasonItems.map(s => {
      s.style.display = s.id === `season-${number}`
        ? 'block'
        : 'none'
    })
  },

  showMore() {
    const episodes = document.getElementById("js-show-more-container");
    if(episodes) {
      episodes.style.display = episodes.style.display == "flex" ? "none" : "flex";
    }
  }
}

document.addEventListener('DOMContentLoaded', () => {
  SeriesDetail.init()
})

Answer 1

<div class="season-list" id="js-show-more-container">
<p class="show-more" onclick="SeriesDetail.showMore('js-show-more-container')">SHOW MORE</p>
</div>

你的所有代码都是正确的。你需要在类的帮助下调用showMore函数，如上所述。

Answer 2

我已经找到了下面的解决方案。我需要为触发器设置初始未定义状态，正确绑定触发器的事件侦听器，初始化DOM中的触发器，并根据当前选定的div对齐它。

const SeriesDetail = {
  showMoreTrigger: undefined,

  bindEvents () {
    this.showMoreTrigger.addEventListener('click', (e) => {
      this.showMore();
    });
  },

  init () {
    this.showMoreTrigger = document.getElementsByClassName('js-show-more-trigger')[0]
    this.setSeason(seasonNum)
    this.bindEvents()

    return this
  },

  showMore() {
    let seasons = document.getElementByClassName("js-season-list-more");
    seasons = [...seasons]
    let season = seasons.find(s => {
      const number = s.dataset.seasonNumber
      return this.activeSeason === number
    })
    if(episodes) {
      episodes.style.display = episodes.style.display == "flex" ? "none" : "flex";
    }
  }
}

document.addEventListener('DOMContentLoaded', () => {
  SeriesDetail.init()
})

此外，从实际触发器中删除了onclick事件，使用事件侦听器来处理click事件：

span(class="js-show-more-trigger") SHOW MORE