下拉菜单排序电影列表失效，遇ReferenceError与TypeError求助

• 通过开放API获取电影数据并以卡片形式展示，希望用下拉菜单实现标题A-Z、评分从高到低排序，但初始卡片加载后选择下拉选项无效果
• 触发两类错误：
  1. Uncaught ReferenceError: handleSortChange is not defined（来自HTMLSelectElement.onchange事件）
  2. TypeError: Cannot read properties of undefined (reading 'slice')（来自sortByTitle函数）
• 经console.log验证，callGetMoviesAPI返回undefined
• 已在index.html头部引入sort.js模块，但问题未解决

1. 修复handleSortChange未定义问题 #

• 若使用ES模块（<script type="module" src="sort.js"></script>），模块内函数默认私有，需挂载到全局或改用事件监听：
  • 挂载全局方式（适合快速调试）：

    // sort.js 中
    window.handleSortChange = function(e) {
      // 后续排序逻辑
    }
    

  • 推荐事件监听方式（避免全局污染）：

    // sort.js 中
    document.addEventListener('DOMContentLoaded', () => {
      document.getElementById('sort-select').addEventListener('change', handleSortChange);
    });
    
    function handleSortChange(e) {
      // 排序逻辑
    }
    

  • 对应HTML需去掉onchange属性，添加ID：

    <select id="sort-select">
      <option value="title">标题A-Z</option>
      <option value="rating">评分从高到低</option>
    </select>
    

2. 解决slice调用在undefined上的问题 #

错误根源是callGetMoviesAPI返回undefined，需先修复API调用逻辑：

• 确保API函数正确返回有效数组：

  async function callGetMoviesAPI() {
    try {
      const res = await fetch('你的电影API地址');
      const data = await res.json();
      // 兜底返回空数组，避免undefined
      return data?.results || [];
    } catch (err) {
      console.error('API调用失败:', err);
      return [];
    }
  }
  

• 排序函数中先校验数据源合法性：

  function sortByTitle(movies) {
    if (!movies) return [];
    // 用展开运算符替代slice，创建数组副本避免修改原数据
    return [...movies].sort((a, b) => a.title.localeCompare(b.title));
  }
  
  function sortByRating(movies) {
    if (!movies) return [];
    return [...movies].sort((a, b) => b.rating - a.rating);
  }
  

3. 整合排序与渲染逻辑 #

• 维护全局电影数据变量，排序后重新渲染卡片：

  let movieData = [];
  
  // 初始化加载数据
  async function init() {
    movieData = await callGetMoviesAPI();
    renderMovies(movieData);
  }
  
  // 卡片渲染函数
  function renderMovies(movies) {
    const container = document.getElementById('movie-container');
    container.innerHTML = '';
    movies.forEach(movie => {
      const card = document.createElement('div');
      card.className = 'movie-card';
      card.innerHTML = `
        <h3>${movie.title}</h3>
        <p>评分: ${movie.rating}</p>
      `;
      container.appendChild(card);
    });
  }
  
  // 排序处理函数
  function handleSortChange(e) {
    let sortedMovies = [...movieData];
    switch(e.target.value) {
      case 'title':
        sortedMovies = sortByTitle(sortedMovies);
        break;
      case 'rating':
        sortedMovies = sortByRating(sortedMovies);
        break;
    }
    renderMovies(sortedMovies);
  }
  
  // 页面加载完成后初始化
  document.addEventListener('DOMContentLoaded', init);
  

内容的提问来源于stack exchange，提问作者조은영