JS实现电影过滤器时radioValue传递给函数后变为undefined如何解决

问题原因 #

你调用addHandleToChange函数时没有传入实参，导致函数形参无法接收到值，所以打印结果为undefined。

解决方案 #

仅需要修改addEventListeners函数中调用addHandleToChange的代码，把获取到的radioValue作为参数传入即可，完整修正代码如下：

const radioButtons = document.querySelectorAll('[name="film-filter"]');

function addEventListeners() {
    for (let counter = 0; counter < radioButtons.length; counter++) {
        radioButtons[counter].addEventListener("change", event => {
            const radioValue = event.target.value;
            // 这里把radioValue作为参数传入函数
            addHandleToChange(radioValue);
        });
    };
};

function addHandleToChange(radioValue) {
    console.log(radioValue);
    // 后续在此处编写switch筛选逻辑即可，示例：
    /*
    switch(radioValue) {
      case 'all':
        // 展示所有电影的逻辑
        break;
      case 'science_fiction':
        // 筛选科幻电影的逻辑
        break;
      case 'romance':
        // 筛选爱情电影的逻辑
        break;
      default:
        // 兜底逻辑
    }
    */
};

addEventListeners();

上述修改完全保留了你要求的两个原函数命名，执行后即可正常在addHandleToChange内拿到单选框的选中值，完成后续筛选逻辑。

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