setInterval doesn't work correctly when choose different value

Question

Please. help. How to correct the code. When you select a value and press stop, and then select another value, the value at which it stopped last time is displayed immediately, and then the countdown starts from the new value. And when there's a countdown, how to make it so that when the time runs out or when we press stop, the div, which changes the background, always initially remains green(when the value is even, it remains red at the end), ie when setInterval was done, everything looked in its original state.

 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

To fix the first problem, assign the data-count value to the DIV in the click handler, not just the interval function.

I've also changed the code to decrement and check innerHTML rather than dataset.count . The way you did it you can't reuse the same count, because data-count is permanently changed by the decrement code.

To fix the second problem, just remove the red class when the timer runs out.

 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>