How to add class in sequence based on button click?-CodePudding

I only found examples using jQuery, but I would like to know how to add and remove classes in sequence, according to the button click, using Vanilla JS. I tried using forEach but I was only able to add all the classes at once.

document.querySelector('#addBtn').addEventListener('click', () => {
   document.querySelectorAll('.dot').forEach(e => {
      e.classList.add('active')
   })
})

document.querySelector('#removeBtn').addEventListener('click', () => {
   document.querySelectorAll('.dot').forEach(e => {
      e.classList.remove('active')
   })
})

.dots{
   position: relative;
   display: flex;
  justify-content: space-around;
   width: 100%;
   height: 10px;
   margin-bottom: 40px;
}

.dot{
   position: relative;
   height: 10px;
   width: 100%;
   background-color: grey;
   margin: 5px;
}

.dot.active{
   background-color: red;
}

 <button type="button" id="removeBtn">Remove</button>
 <button type="button" id="addBtn">Add</button>

  <div >
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
   </div>

CodePudding user response：

You can check the below logic with querySelectorAll for finding the last active elements and using nextElementSibling to apply the change

document.querySelector('#addBtn').addEventListener('click', () => {
  const activeElements = document.querySelectorAll('.dot.active')

  //no active elments
  if (!activeElements || !activeElements.length) {
    //set active class for the first found element
    const firstElement = document.querySelector('.dot')
    if (firstElement) {
      firstElement.classList.add('active')
      return
    }
  }

  //finding the last active element
  const lastElement = activeElements[activeElements.length - 1];
  
  //apply the class the next element of the current active element
  const nextElement = lastElement.nextElementSibling
  if (nextElement) {
    nextElement.classList.add('active')
  }
})

document.querySelector('#removeBtn').addEventListener('click', () => {
  const activeElements = document.querySelectorAll('.dot.active')
  //finding the last active element 
  const lastElement = activeElements[activeElements.length - 1];
  if (lastElement) {
    //remove the active class from the last active element
    lastElement.classList.remove('active')
  }
})

.dots {
  position: relative;
  display: flex;
  justify-content: space-around;
  width: 100%;
  height: 10px;
  margin-bottom: 40px;
}

.dot {
  position: relative;
  height: 10px;
  width: 100%;
  background-color: grey;
  margin: 5px;
}

.dot.active {
  background-color: red;
}

 <button type="button" id="removeBtn">Remove</button>
 <button type="button" id="addBtn">Add</button>

 <div >
   <div ></div>
   <div ></div>
   <div ></div>
   <div ></div>
   <div ></div>
 </div>

CodePudding user response：

You can break out of the loop once a dot has had active added/removed.

document.querySelector('#addBtn').addEventListener('click', () => {
  const dots = document.querySelectorAll('.dot');
  for (let dot of dots) {
    if (![...dot.classList].includes('active')) {
      dot.classList.add('active');
      break;
    }
  }
});

document.querySelector('#removeBtn').addEventListener('click', () => {
  const dots = document.querySelectorAll('.dot');
  for (let dot of [...dots].reverse()) {
    if ([...dot.classList].includes('active')) {
      dot.classList.remove('active');
      break;
    }
  }
});

.dots{
   position: relative;
   display: flex;
  justify-content: space-around;
   width: 100%;
   height: 10px;
   margin-bottom: 40px;
}

.dot{
   position: relative;
   height: 10px;
   width: 100%;
   background-color: grey;
   margin: 5px;
}

.dot.active{
   background-color: red;
}

<button type="button" id="removeBtn">Remove</button>
<button type="button" id="addBtn">Add</button>

<div >
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
</div>

CodePudding user response：

Please check answer below. Explanation is in comments.

document.querySelector('#addBtn').addEventListener('click', () => {
  // Get active elements
  let activeEl = document.querySelectorAll('.dot.active');
  let nextActiveEl;

  // If we found active element then find the next sibling else select the first element
  if (activeEl.length > 0) {
    nextActiveEl = activeEl[activeEl.length - 1].nextElementSibling
  } else {
    nextActiveEl = document.querySelectorAll('.dot')[0];
  }

  // If selected element is not null then add class active
  if (nextActiveEl)
    nextActiveEl.classList.add('active');
})

document.querySelector('#removeBtn').addEventListener('click', () => {
  // Get active elements
  let activeEl = document.querySelectorAll('.dot.active');

  // If we found active element then remove active class of last active element
  if (activeEl.length > 0) {
    activeEl[activeEl.length - 1].classList.remove('active');
  }
})

.dots {
  position: relative;
  display: flex;
  justify-content: space-around;
  width: 100%;
  height: 10px;
  margin-bottom: 40px;
}

.dot {
  position: relative;
  height: 10px;
  width: 100%;
  background-color: grey;
  margin: 5px;
}

.dot.active {
  background-color: red;
}

<button type="button" id="removeBtn">Remove</button>
<button type="button" id="addBtn">Add</button>

<div >
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
</div>