如何将HTML元素的innerText作为对象键，获取对应值传入API参数

你写的genres.e.innerText不生效有两个核心原因：

1. 事件对象e的触发元素需要通过e.target获取，不能直接读取e.innerText
2. 当你需要用变量作为键访问对象属性时，不能用.语法，要改用[]方括号语法：.语法后面的内容会被当做固定的属性名解析，不会做变量替换。

修改后的完整实现代码 #

function genreChoose(e){
    let genres = {
        action: 80
        // 可继续补充其他电影类型对应的编号
    }
    // 获取点击元素的文本，先去掉首尾空格避免空白字符导致匹配失败
    const genreKey = e.target.innerText.trim()
    // 容错判断，避免传入genres中不存在的类型
    if (!genres.hasOwnProperty(genreKey)) return
    let url = new URL(lastUrl);
    // 用方括号语法传入变量作为键，获取对应类型编号
    url.searchParams.set('with_genres', genres[genreKey])
    fetchURL(url);
}

如果还没有给对应span绑定点击事件，可以参考下面的绑定逻辑：

// 假设你的类型span都加了genre-type的类名，可根据实际情况修改选择器
document.querySelectorAll('.genre-type').forEach(span => {
    span.addEventListener('click', genreChoose)
})

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