基于IIFE封装的Pokémon列表分页功能报错求助：Uncaught ReferenceError: previousPage is not defined

我看到你作为编程新手遇到了分页按钮的Uncaught ReferenceError问题，核心原因是函数作用域不匹配——你把分页相关的函数都封装在了IIFE（立即执行函数表达式）内部，而HTML里的onclick是在全局作用域下查找函数的，自然找不到这些私有函数。下面给你详细的排查和修复方案：

问题根源拆解 #

你的pokemonRepository是一个闭包，内部定义的nextPage、previousPage、firstPage、lastPage都是私有函数，只能在IIFE内部访问。但HTML中的onClick="firstPage()"会在全局window对象里查找firstPage函数，找不到就会抛出你看到的错误。

修复方案（两种可选） #

方案1：暴露函数到全局（简单快速） #

修改IIFE的返回值，把需要调用的分页函数暴露到pokemonRepository对象上，然后在HTML里通过这个对象调用函数：

1. 修改scripts.js里的return部分：

return {
  load: load,
  nextPage: nextPage,
  previousPage: previousPage,
  firstPage: firstPage,
  lastPage: lastPage
};

2. 更新HTML按钮的onclick属性：

<button id="first" onClick="pokemonRepository.firstPage()">first</button>
<button id="previous" onClick="pokemonRepository.previousPage()">previous</button>
<button id="next" onClick="pokemonRepository.nextPage()">next</button>
<button id="last" onClick="pokemonRepository.lastPage()">last</button>

方案2：用事件监听器绑定（更推荐，符合现代JS实践） #

这种方式不需要在HTML里写onclick，而是在JS内部给按钮绑定事件，避免全局作用域污染，代码结构更清晰：

1. 先修改HTML，去掉所有onclick属性：

<button id="first">first</button>
<button id="previous">previous</button>
<button id="next">next</button>
<button id="last">last</button>

2. 在IIFE内部添加一个绑定事件的函数：

function bindPaginationEvents() {
  document.getElementById('first').addEventListener('click', firstPage);
  document.getElementById('previous').addEventListener('click', previousPage);
  document.getElementById('next').addEventListener('click', nextPage);
  document.getElementById('last').addEventListener('click', lastPage);
}

3. 在load函数里调用这个绑定函数：

function load() {
  makeList();
  loadTheList();
  bindPaginationEvents(); // 新增这行，初始化按钮事件
}

4. 确保IIFE的return里包含load函数（你原来的代码里应该已经有了，确认一下）：

return {
  load: load
};

额外小提示 #

• 你当前的list数组是模拟的0到199，之后要替换成真实的pokemonList数据，记得把makeList函数改成从pokemonList取数据，而不是手动push数字。
• 最后要在scripts.js末尾调用初始化函数，确保页面加载后启动分页：

pokemonRepository.load();

内容的提问来源于stack exchange，提问作者Szilard Mihocsa