Why is that when the text is changing the dots do not change-CodePudding

I want it that when the text changes the class "slider-dot-active" should take effect, but it is not working.

For some reason when the text changes the dots do not change or adapt the class of slider-dot-active, I am a beginner to this so what exactly am I doing wrong?

//Intervals for changing text and circles
let bannerTxt = document.querySelector('.banner-txt');
let textArr = ['Monitor All Employee Activies', 'Add New Employee Details With Speech', 'Turn Employee Management To An Easier Task'];
let changeTextCounter = 0

let sliderDots = document.querySelectorAll('.slider-dot');

function changeDots() {
  for (let sliderDot of sliderDots) {
    sliderDots[sliderDot].className.replace('slider-dot-active', "")
  }

  sliderDots[changeTextCounter - 1].className  = 'slider-dot-active';
}


function changeTxt() {
  bannerTxt.innerHTML = textArr[changeTextCounter]
  changeDots()
  changeTextCounter  
  if (changeTextCounter >= textArr.length) {
    changeTextCounter = 0
  }
}

let inst = setInterval(changeTxt, 3000)

.column-2 {
  background-color: royalblue;
  width: 50%;
}

.thunder {
  width: 300px;
  margin-top: 1rem;
}

.column-content h3 {
  margin-top: -1rem;
}

.column-content p {
  color: #808080;
}

.google-button {
  width: 100%;
}

.google-button svg {
  margin-right: 0.5rem;
}

.separator hr {
  width: 20%;
  margin-right: 0.5rem;
}

.second-hr {
  margin-right: 0;
  margin-left: 0.5rem;
}

.submit-btn {
  width: 100%;
  background-color: #29abe2;
  color: white;
  border-radius: 20px;
  transition: all 1s ease;
}

.submit-btn:hover {
  border: 1px solid black;
}

.create-account span {
  color: #29abe2;
}

.create-account span:hover {
  text-decoration: underline;
}

.create-account a {
  text-decoration: none;
}

.column-2 img {
  height: 100vh;
  width: 100%;
  position: relative;
}

.banner-heading {
  text-align: center;
}

.banner-txt {
  position: absolute;
  bottom: 8rem;
  color: white;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
}

.banner-paragrapgh {
  position: absolute;
  bottom: 4rem;
  color: white;
  font-family: "Poppins", sans-serif;
}

.matching-txt {
  display: none;
  font-size: 0.8rem;
}

.banner-rectangles {
  position: absolute;
  bottom: 3rem;
}

.slider-dot {
  width: 10px;
  height: 10px;
  background-color: white;
  margin-right: 1rem;
}

.slider-dot-active {
  width: 16px;
  height: 7px;
  background-color: white;
  margin-right: 1rem;
}

<div >
  <img  src="/Picture2.png" alt="">
  <div >
    <h3 >Turn Employee Managment <span><br>To An Easier Task.</span></h3>
    <div >
      <div ></div>
      <div ></div>
      <div ></div>
    </div>
    <p >It gets easier after each step!</p>
  </div>
</div>
</div>

CodePudding user response：

Try this:

function changeDots() {
  for (let sliderDot of sliderDots) {
    sliderDot.classList.remove('slider-dot-active')
  }

  sliderDots[changeTextCounter - 1].classList.add('slider-dot-active');
}