点击按钮在Bootstrap列表组中实现for循环迭代展示办公地点

原代码存在的问题 #

• 函数名拼写不一致：定义的是getOfficeLocations，调用时写成了getOfficeLocation，会触发函数未定义错误
• 事件监听器绑定位置错误：把addEventListener放在for循环内部，会给按钮重复绑定多次点击事件，单次点击会触发多次逻辑
• 缺少DOM创建逻辑：仅打印数组元素，没有生成Bootstrap列表项并添加到列表组中
• 未处理重复点击的情况：多次点击按钮会重复添加列表项

修正后的代码 #

// 获取Bootstrap列表组容器
const groupList = document.querySelector("ul");
// 获取触发按钮
const officesBtn = document.getElementById("ofLocations");
// 办公地点数组
const officeLocations = ["New York", "London", "Paris", "Tokyo", "Sydney"];

// 生成办公地点列表的函数
function renderOfficeLocations(arr) {
    // 先清空列表，避免重复添加
    groupList.innerHTML = "";
    // 循环数组创建列表项
    for (let i = 0; i < arr.length; i++) {
        // 创建li元素，添加Bootstrap的list-group-item类
        const listItem = document.createElement("li");
        listItem.className = "list-group-item";
        listItem.textContent = arr[i];
        // 将列表项添加到列表组
        groupList.appendChild(listItem);
    }
}

// 给按钮绑定一次点击事件，点击时调用生成列表的函数
officesBtn.addEventListener("click", () => {
    renderOfficeLocations(officeLocations);
});

代码说明 #

• 先获取列表组容器和按钮元素，确保DOM元素正确获取
• renderOfficeLocations函数负责生成列表：先清空容器，再循环创建带Bootstrap样式的列表项，添加到容器中
• 把事件监听器绑定在按钮上，仅绑定一次，点击时触发列表生成逻辑，避免重复绑定问题

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