I have this counter that based on the requirements - Counts backwards or in ascending order and It works just fine however I want to display text along with each of the numbers as they are shown being counted - however the text changes as soon as there is a change. So the question is - How can I have a innerhtml that only affects a part of it not the full content. I want the text to remain as it is.
here is the html and JS.
<div class="container">
<div class="number mt-3">100 **[I WANT TO ADD SOME TEXT HERE]** </div>
</div>
JS
const numberEl = document.querySelector('.number');
let startNumber = parseInt(numberEl.innerHTML);
const endNumber = 0;
const ticker = setInterval(() => {
numberEl.innerHTML = startNumber--;
if(startNumber === endNumber - 1) {
clearInterval(ticker);
}
}, 200);
You can also find the codepen here: https://codepen.io/kenkozma17/pen/XWdbdrd