There is HTML

<div class="why"> <div class="why__slide why__slide-active"></div> <div class="why__slide"></div> <div class="why__slide"></div> <div class="why__slide"></div> </div> <button class="why__button-left" id="why-left-button">назад</button> <button class="why__button-right" id="why-right-button">вперед</button>

There is a JS code

 let slides = document.getElementsByClassName('why__slide'); let slideActive = document.querySelector('.why__slide-active'); let index = 0; whyPageRightButton.addEventListener('click', moveRight); function moveRight(p){ if (slides[index] != slides[index].length) { slides[index].classList.remove('why__slide-active'); slides[++index].classList.add('why__slide-active'); } else { slides[0].classList.add('why__slide-active'); } } whyPageLeftButton.addEventListener('click', moveLeft); function moveLeft(){ slides[index].classList.remove('why__slide-active'); slides[index-1].classList.add('why__slide-active'); }

now when we click the right button we switch the class why__page-active to the next div. But when we reach the last one, we have to switch back to the first div in the list, I don’t understand what I’m doing wrong, please help with an explanation using the example of this code in pure JS

and also when we press the back button, we switch only to one div back, apparently this happens because index = 0 . Please chew what I am doing wrong, I do not understand the day on the Internet

  • slides [index]! = slides [index] .length and what is it if I am not mistaken then this is a div and the length of a div - Sasuke
  • If you are given an exhaustive answer, mark it as correct (checkmark the selected answer) - Grundy

2 answers 2

 function moveRight(p) { slides[index].classList.remove('why__slide-active'); index = Math.min(index + 1, slides.length - 1); slides[index].classList.add('why__slide-active'); } function moveLeft() { slides[index].classList.remove('why__slide-active'); index = Math.max(0, index - 1); slides[index].classList.add('why__slide-active'); }

  • Many thanks for the answer, could you explain what index = Math.max (0, index - 1) does; and when it reaches the last block to the right, it still does not go to the first one and does not stop, it gives an error in the console - Big D
  • @BigD Sorry, "off-by-one error"). developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… -

The behavior of the moveRight and moveLeft should be similar:

On the example of moveRight

  1. remove the active class from the element at the current index
  2. increase the index by 1
  3. if index == slides.length reset index to 0
  4. set the class of the active element at the current index

In code, it might look like this:

 function moveRight(){ slides[index].classList.remove('why__slide-active'); index = index + 1; if (index == slides.length) { index = 0; } slides[index].classList.add('why__slide-active'); }

moveLeft looks the same.

 var whyPageRightButton = document.getElementById('why-right-button'); var whyPageLeftButton = document.getElementById('why-left-button'); let slides = document.getElementsByClassName('why__slide'); let index = 0; whyPageRightButton.addEventListener('click', moveRight); function moveRight() { slides[index].classList.remove('why__slide-active'); index = index + 1; if (index == slides.length) { index = 0; } slides[index].classList.add('why__slide-active'); } whyPageLeftButton.addEventListener('click', moveLeft); function moveLeft() { slides[index].classList.remove('why__slide-active'); index = index - 1; if (index == -1) { index = slides.length - 1; } slides[index].classList.add('why__slide-active'); } 
 .why__slide { border: 1px solid black; width: 40px; height: 40px; display: inline-block; } .why__slide-active { background: red; } 
 <div class="why"> <div class="why__slide why__slide-active"></div> <div class="why__slide"></div> <div class="why__slide"></div> <div class="why__slide"></div> </div> <button class="why__button-left" id="why-left-button">назад</button> <button class="why__button-right" id="why-right-button">вперед</button>

It is also possible not to use an index at all, but to operate only with the active element.

  1. Save document.getElementsByClassName('why__slide-active') to the list. Since the collection is live, it will always contain the current active element.
  2. In event handlers you need to take this element, it will always be zero in the collection, since there is only one active element.
  3. remove class active
  4. In the case of right , you need to check with the element nextElementSibling
  5. if it is absent, it means that they have reached the end, and you need to take the first element, you can do this by calling firstElementChild
  6. add class active

In the case of left previousElementSibling and lastElementChild respectively.

Example:

 var whyPageRightButton = document.getElementById('why-right-button'); var whyPageLeftButton = document.getElementById('why-left-button'); let activeSlides = document.getElementsByClassName('why__slide-active'); whyPageRightButton.addEventListener('click', moveRight); function moveRight() { var activeSlide = activeSlides[0]; activeSlide.classList.remove('why__slide-active'); var nextActive = activeSlide.nextElementSibling || activeSlide.parentNode.firstElementChild; nextActive.classList.add('why__slide-active'); } whyPageLeftButton.addEventListener('click', moveLeft); function moveLeft() { var activeSlide = activeSlides[0]; activeSlide.classList.remove('why__slide-active'); var nextActive = activeSlide.previousElementSibling || activeSlide.parentNode.lastElementChild; nextActive.classList.add('why__slide-active'); } 
 .why__slide { border: 1px solid black; width: 40px; height: 40px; display: inline-block; } .why__slide-active { background: red; } 
 <div class="why"> <div class="why__slide why__slide-active"></div> <div class="why__slide"></div> <div class="why__slide"></div> <div class="why__slide"></div> </div> <button class="why__button-left" id="why-left-button">назад</button> <button class="why__button-right" id="why-right-button">вперед</button>

  • Thank you so much! sure this example will help many - Big D