如何用addEventListener实现班级学生筛选（不可修改HTML）

我来帮你完善代码，完全符合你的要求——不用改HTML，只用addEventListener实现筛选，而且基于你现有的fetch逻辑。核心思路是先把所有学生数据存起来，然后给单选按钮绑定事件，根据选中的班级筛选并重新渲染列表。

完整修改后的JavaScript代码 #

// 全局变量存储所有学生数据，方便后续重复筛选使用
let allStudents = [];
// 提前获取学生列表容器，避免重复查询DOM
const studentListContainer = document.querySelector(".studenter");

// 通用渲染函数：根据筛选条件渲染对应学生
function renderFilteredStudents(filterValue) {
    // 先清空当前列表，避免叠加内容
    studentListContainer.innerHTML = "";

    // 筛选数据：如果选的是"Show all"就用全部数据，否则匹配班级缩写
    const filteredData = filterValue === "all"
        ? allStudents
        : allStudents.filter(student => student.forkortelse === filterValue);

    // 渲染筛选后的学生条目
    filteredData.forEach(student => {
        const listItem = document.createElement("li");
        // 用textContent比innerHTML更安全，适合纯文本内容
        listItem.textContent = `Name: ${student.fornavn} ${student.etternavn}`;
        studentListContainer.appendChild(listItem);
    });
}

// 加载JSON数据并初始化功能
fetch("studenter.json")
    .then(response => response.json())
    .then(data => {
        // 保存所有学生数据到全局变量
        allStudents = data;
        // 页面加载完成后默认显示所有学生
        renderFilteredStudents("all");

        // 给所有班级单选按钮添加change事件监听
        const classRadioButtons = document.querySelectorAll('input[name="programvelger"]');
        classRadioButtons.forEach(radio => {
            radio.addEventListener("change", function() {
                // 只有当当前单选按钮被选中时，执行筛选
                if (this.checked) {
                    // 用单选按钮的id作为筛选条件（正好对应JSON里的forkortelse字段）
                    renderFilteredStudents(this.id);
                }
            });
        });
    });

代码说明 #

1. 保存原始数据：用allStudents变量存储所有学生信息，这样每次筛选不用重新请求JSON，提升性能和体验。
2. 通用渲染函数：renderFilteredStudents把渲染逻辑抽离出来，负责清空列表、筛选数据、生成新条目，避免重复写相同代码。
3. 事件监听逻辑：
   • 用querySelectorAll选中所有name为programvelger的单选按钮，确保不遗漏任何选项。
   • 使用change事件而非click：因为单选按钮可以通过键盘（Tab+空格）切换状态，change事件能覆盖所有交互场景，更健壮。
   • 利用单选按钮的id作为筛选条件：你的HTML里每个单选按钮的id正好和JSON里的forkortelse字段匹配（比如BIGEOMAT），完美对应，不用额外做映射。
4. 初始渲染：数据加载完成后默认渲染所有学生，对应"Show all"选项，符合用户预期。

额外优化点 #

• 用textContent代替innerHTML：因为这里只是展示纯文本，textContent更安全（避免潜在的XSS风险），也比innerHTML更高效。
• 提前获取DOM元素：把studentListContainer的查询放在最前面，避免每次渲染都重复查询DOM，提升性能。

这样修改后，你点击任意班级单选按钮，列表就会自动更新为对应班级的学生，完全满足教授的要求，而且没有修改一行HTML代码。

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