setInterval не работает правильно при выборе другого значения

Question

Пожалуйста. Помогите. Как исправить код. Когда вы выбираете значение и нажимаете стоп, а затем выбираете другое значение, сразу отображается значение, на котором оно остановилось в последний раз, а затем обратный отсчет начинается с нового значения. И когда идет обратный отсчет, как сделать так, чтобы, когда время истекает или когда мы нажимаем стоп, div, который меняет фон, всегда изначально остается зеленым (когда значение четное, оно остается красным в конце), т.е. когда setInterval был выполнен, все выглядело в исходном состоянии.

const amountOfRotation = document.querySelector('.feature-block-list');
const countdownNumbValue = document.querySelector('.countdown-numb-value');
const countdown = document.querySelector('.countdown');
const autoButton = document.querySelector('.auto-button');
const countdownTxt = document.querySelector('.countdown-txt');
const changeColor = document.querySelector('.change-color');

amountOfRotation.addEventListener('click', ({
  target: {
    dataset
  }
}) => {
  autoButton.classList.add('stop');
  countdown.classList.remove('stop');
  amountOfRotation.classList.add('disable-btn');

  let timerId = setInterval(() => {
    countdownNumbValue.innerHTML = dataset.count--;
    changeColor.classList.toggle('red');
    if (dataset.count < 0) {
      clearInterval(timerId);
      countdown.classList.add('stop');
      autoButton.classList.remove('stop');
      amountOfRotation.classList.remove('disable-btn');
    };
  }, 1500);

  countdownTxt.addEventListener('click', () => {
    clearInterval(timerId);
    countdown.classList.add('stop');
    autoButton.classList.remove('stop');
    amountOfRotation.classList.remove('disable-btn');
  })
});

.feature-block-paragraph {
  margin-left: 6px;
}

.feature-block-paragraph li {
  color: #ffd100;
}

.feature-block-paragraph ul li:hover {
  color: black;
  cursor: pointer;
}

.countdown-txt {
  color: #3d0000;
  cursor: pointer;
}

.countdown {
  display: flex;
  align-items: center;
  margin-left: 9%;
}

.countdown-numb {
  border: 1px solid black;
  border-radius: 50px;
  color: #ffd100;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20px;
}

.stop {
  display: none;
}

.disable-btn {
  pointer-events: none;
  opacity: 0.4;
}

.change-color {
  border: 1px solid black;
  border-radius: 100%;
  background: green;
  width: 20px;
  height: 20px;
}

.red {
  background: red;
}

<div class="feature-block-paragraph">
  <ul class="feature-block-list">
    <li class="sound-div" data-count="25">25</li>
    <li class="sound-div" data-count="20">20</li>
    <li class="sound-div" data-count="15">15</li>
    <li class="sound-div" data-count="10">10</li>
    <li class="sound-div" data-count="5">5</li>
  </ul>
</div>
<div class="auto-button">
  <span class="auto-button-txt">AUTO</span>
</div>
<div class="countdown stop">
  <div class="countdown-numb">
    <span class="countdown-numb-value"></span>
  </div>
  <span class="countdown-txt">STOP</span>
</div>
<div class="change-color">

</div>

Answer 1

Чтобы исправить первую проблему, присвойте значение data-count DIV в обработчике кликов, а не только функцию интервала.

Я также изменил код, чтобы уменьшить и проверить innerHTML, а чем dataset.count. Как вы это сделали, вы не можете повторно использовать тот же счетчик, потому что data-count постоянно изменяется кодом декремента.

Чтобы исправить вторую проблему, просто удалите класс red, когда таймер закончится .

const amountOfRotation = document.querySelector('.feature-block-list');
const countdownNumbValue = document.querySelector('.countdown-numb-value');
const countdown = document.querySelector('.countdown');
const autoButton = document.querySelector('.auto-button');
const countdownTxt = document.querySelector('.countdown-txt');
const changeColor = document.querySelector('.change-color');

amountOfRotation.addEventListener('click', ({
  target: {
    dataset
  }
}) => {
  autoButton.classList.add('stop');
  countdown.classList.remove('stop');
  amountOfRotation.classList.add('disable-btn');
  countdownNumbValue.innerHTML = dataset.count

  let timerId = setInterval(() => {
    countdownNumbValue.innerHTML--;
    changeColor.classList.toggle('red');
    if (countdownNumbValue.innerHTML <= 0) {
      clearInterval(timerId);
      countdown.classList.add('stop');
      autoButton.classList.remove('stop');
      amountOfRotation.classList.remove('disable-btn');
      changeColor.classList.remove('red');
    };
  }, 1500);

  countdownTxt.addEventListener('click', () => {
    clearInterval(timerId);
    countdown.classList.add('stop');
    autoButton.classList.remove('stop');
    amountOfRotation.classList.remove('disable-btn');
    changeColor.classList.remove('red');
  })
});

.feature-block-paragraph {
  margin-left: 6px;
}

.feature-block-paragraph li {
  color: #ffd100;
}

.feature-block-paragraph ul li:hover {
  color: black;
  cursor: pointer;
}

.countdown-txt {
  color: #3d0000;
  cursor: pointer;
}

.countdown {
  display: flex;
  align-items: center;
  margin-left: 9%;
}

.countdown-numb {
  border: 1px solid black;
  border-radius: 50px;
  color: #ffd100;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20px;
}

.stop {
  display: none;
}

.disable-btn {
  pointer-events: none;
  opacity: 0.4;
}

.change-color {
  border: 1px solid black;
  border-radius: 100%;
  background: green;
  width: 20px;
  height: 20px;
}

.red {
  background: red;
}

<div class="feature-block-paragraph">
  <ul class="feature-block-list">
    <li class="sound-div" data-count="25">25</li>
    <li class="sound-div" data-count="20">20</li>
    <li class="sound-div" data-count="15">15</li>
    <li class="sound-div" data-count="10">10</li>
    <li class="sound-div" data-count="5">5</li>
  </ul>
</div>
<div class="auto-button">
  <span class="auto-button-txt">AUTO</span>
</div>
<div class="countdown stop">
  <div class="countdown-numb">
    <span class="countdown-numb-value"></span>
  </div>
  <span class="countdown-txt">STOP</span>
</div>
<div class="change-color">

</div>