JavaScript轮播Banner报错：Uncaught TypeError: bButtonR.addEventListener is not a function

问题说明 #

需要实现一个支持3张Banner切换的轮播容器，目前遇到报错：Uncaught TypeError: bButtonR.addEventListener is not a function at index.html，原代码如下：

const bannerItem1 = document.querySelectorAll("#bItem1");
const bannerItem2 = document.querySelectorAll("#bItem2");
const bannerItem3 = document.querySelectorAll("#bItem3");
const bButtonL = document.querySelectorAll(".left-arrow");
const bButtonR = document.querySelectorAll(".right-arrow");
let iCounter = 1;

bButtonR.addEventListener("click", ()=> {
    iCounter++;
    updateBanner();
});

function updateBanner() {
  if (iCounter > 3) {
        iCounter = 3;
    } else if(iCounter === 1) {
        bannerItem2.style.display = "none";
        bannerItem3.style.display = "none";
        bannerItem1.style.display = "flex";
    } else if (iCounter === 2) {
        bannerItem1.style.display = "none";
        bannerItem3.style.display = "none";
        bannerItem2.style.display = "flex";
    }
      else if (iCounter === 3) {
        bannerItem1.style.display = "none";
        bannerItem2.style.display = "none";
        bannerItem3.style.display = "flex";
    } 
};

错误原因 #

1. querySelectorAll返回集合而非单个元素：该方法会返回NodeList类数组集合，集合本身没有addEventListener方法，无法直接绑定事件。
2. ID选择器误用querySelectorAll：DOM中ID是唯一标识，用querySelector("#xxx")即可获取单个元素，误用querySelectorAll会导致后续修改style时同样报错（集合无style属性）。

修复后的可运行代码 #

// 改用querySelector获取单个元素（ID唯一，单元素类选择器也适用）
const bannerItem1 = document.querySelector("#bItem1");
const bannerItem2 = document.querySelector("#bItem2");
const bannerItem3 = document.querySelector("#bItem3");
const bButtonL = document.querySelector(".left-arrow");
const bButtonR = document.querySelector(".right-arrow");
let iCounter = 1;

// 右按钮点击事件：实现循环轮播
bButtonR.addEventListener("click", () => {
    iCounter++;
    iCounter = iCounter > 3 ? 1 : iCounter;
    updateBanner();
});

// 补充左按钮点击事件
bButtonL.addEventListener("click", () => {
    iCounter--;
    iCounter = iCounter < 1 ? 3 : iCounter;
    updateBanner();
});

function updateBanner() {
    // 先统一隐藏所有Banner
    bannerItem1.style.display = "none";
    bannerItem2.style.display = "none";
    bannerItem3.style.display = "none";
    
    // 根据计数器显示对应Banner
    switch(iCounter) {
        case 1:
            bannerItem1.style.display = "flex";
            break;
        case 2:
            bannerItem2.style.display = "flex";
            break;
        case 3:
            bannerItem3.style.display = "flex";
            break;
    }
};

// 初始化显示第一张Banner
updateBanner();

优化点说明 #

• 补充左按钮切换逻辑，实现完整的左右切换功能
• 修改计数器为循环模式，解决原代码到最后一张无法继续切换的问题
• 简化updateBanner函数逻辑，先统一隐藏再显示目标Banner，减少冗余判断

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