点击分页项切换播客列表触发Uncaught TypeError的原因与修正

错误原因 #

1. document.getElementsByClassName() 返回的是HTMLCollection（类数组集合），不是单个DOM元素。你直接调用podcastsListOne.classList时，集合本身没有classList属性，因此会触发"Cannot read properties of undefined"错误。
2. event.target.value返回的是字符串类型，你用currentValue === 1（数字）做全等比较，条件永远不成立，代码逻辑根本没按预期执行。
3. currentValue未用let/const声明，会变成全局变量，容易引发意外问题。

修复后的代码 #

方式一：修正原代码的问题 #

// 取集合中的第一个元素（因为你的每个类名唯一）
const podcastsListOne = document.getElementsByClassName("podcasts-list-1")[0];
const podcastsListTwo = document.getElementsByClassName("podcasts-list-2")[0];
const podcastsListThree = document.getElementsByClassName("podcasts-list-3")[0];

function selectPodcastsList(event) {
    // 把字符串转成数字，或者直接用字符串比较
    const currentValue = Number(event.target.value);
    
    if (currentValue === 1) {
        podcastsListOne.classList.add("podcasts-list-visible");
        podcastsListTwo.classList.remove("podcasts-list-visible");
        podcastsListThree.classList.remove("podcasts-list-visible");
    } else if (currentValue === 2) {
        podcastsListOne.classList.remove("podcasts-list-visible");
        podcastsListTwo.classList.add("podcasts-list-visible");
        podcastsListThree.classList.remove("podcasts-list-visible");
    } else if (currentValue === 3) {
        podcastsListOne.classList.remove("podcasts-list-visible");
        podcastsListTwo.classList.remove("podcasts-list-visible");
        podcastsListThree.classList.add("podcasts-list-visible");
    }
}

同时修改HTML的onclick，显式传递event参数：

<li class="podcasts-page-item" value="1" onclick="selectPodcastsList(event)">1</li>
<li class="podcasts-page-item" value="2" onclick="selectPodcastsList(event)">2</li>
<li class="podcasts-page-item" value="3" onclick="selectPodcastsList(event)">3</li>

方式二：更简洁的优化方案（推荐） #

不用逐个获取元素，通过类名统一处理，扩展性更强（后续新增分页无需修改代码）：

function selectPodcastsList(event) {
    const currentValue = event.target.value;
    // 隐藏所有播客列表
    document.querySelectorAll('[class^="podcasts-list-"]').forEach(list => {
        list.classList.remove("podcasts-list-visible");
    });
    // 显示对应的列表
    document.querySelector(`.podcasts-list-${currentValue}`).classList.add("podcasts-list-visible");
}

HTML同样需要传递event参数，和上面一致。

额外建议 #

• 优先使用querySelector/querySelectorAll代替getElementsByClassName，前者返回单个元素/NodeList，API更灵活直观。
• 避免依赖全局event对象，调用函数时显式传递参数，兼容性和可读性更好。

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