JavaScript Simple code, Uncaught TypeError: bButtonR.addEventListener is not a function at index.htm-CodePudding

So I wanted to to make a banner container that flicks through multiple banners (3atm), I'm sure most users will be able to understand through the simple code alone. This isn't the final at all but I at least need a working starting point. the error is "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";
    } 
};

CodePudding user response：

Document.querySelectorAll() return a list. If want to select only one element you should use Document.querySelector() or, even better, Document.getElementById(). getElementById is much faster than querySelector and if you do not have any specific reason to use querySelector and you know you will use and id and not a dynamic css selector you should use it. Try this:

const bannerItem1 = document.getElementById("bItem1");
const bannerItem2 = document.getElementById("bItem2");
const bannerItem3 = document.getElementById("bItem3");
const bButtonL = document.querySelector(".left-arrow");
const bButtonR = document.querySelector(".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";
    } 
};

CodePudding user response：

const bButtonL = document.querySelectorAll(".left-arrow"); if the class "left-arrow" is a single class then you must have to use

bButtonR[0].addEventListener("click", ()=> {
    iCounter  ;
    updateBanner();
});

because queryselectorall will put your class in an array . and to access that you should use indexing .

and if one class with same name is there you should use getelementsbyclassname or queryselector not queryselectorall .

const bButtonL = document.querySelector(".left-arrow");
bButtonR.addEventListener("click", ()=> {
        iCounter  ;
        updateBanner();
    });