基于选定电影类型随机生成对应片名的函数传值实现问题

核心问题说明 #

你原有代码存在两个问题：

• forEach 遍历的回调函数中 return 无法将值返回给外层函数，chosenMovieGenre 没有把匹配结果对外暴露
• 要跨函数传递值，最简单的方式是通过全局作用域变量存储中间结果，两个函数都可以读写该变量

完整实现代码 #

1. 定义全局存储变量 #

在JS代码最外层定义两个变量，分别存储当前选中的电影类型、符合该类型的所有片单：

// 存储符合当前选中类型的电影列表
let matchedMovieList = []
// 存储用户选中的电影类型
let selectedGenre = ''

2. 修正下拉类型选择事件逻辑 #

将筛选到的符合类型的片单存入全局变量：

document.getElementById('dropdown-movie').addEventListener('change', (event) => {
  // 更新当前选中的类型
  selectedGenre = event.target.value
  fetch("https://movies-tvshows-data-imdb.p.rapidapi.com/?type=get_random-movies&page=1")
  .then(response => response.json())
  .then(function (jsonObject) {
    const allMovies = jsonObject.movie_results
    // 筛选所有匹配类型的电影，更新全局列表
    matchedMovieList = allMovies.filter(movie => movie.genres[0] === selectedGenre)
  })
  .catch(err => {
    console.error(err);
  });
})

3. 绑定随机生成按钮事件，直接读取全局变量取值 #

假设你的第二个随机生成按钮ID为generate-random-btn，绑定逻辑如下：

document.getElementById('generate-random-btn').addEventListener('click', () => {
  // 空值校验，避免未选类型就点击生成
  if (matchedMovieList.length === 0) {
    alert('请先选择电影类型，或等待片单加载完成')
    return
  }
  // 随机取片单中的一个元素
  const randomIndex = Math.floor(Math.random() * matchedMovieList.length)
  const randomMovieName = matchedMovieList[randomIndex].title
  // 此处可自行添加将randomMovieName渲染到页面的逻辑
  console.log('随机生成电影：', randomMovieName)
})

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