I want to change a class dynamically and append a counter to the end of it. I wrote this code but it is treated like strings.
This is the code:
var divClass = document.getElementById('div2');
var i = 1;
setInterval(function () {
divClass.className=divClass.className.replace('color','color'+ i);
i++;
},5000);
how can i fix this issue?
I think the issue is that after the first loop the class name will be color1 and your replacing only the "color" part so you end up with color12 You could just set className since that overrides the previous one
divClass.className = 'color'+ i;
if you had classes before you can store them and them first so you don't override them : var classes = divClass.className;
and when you set them divClass.className = classes + ', color'+ i;
You could use the classList feature that is in JavaScript like this:
var divClass = document.getElementById('div2');
var i = 1;
setInterval(function () {
divClass.classList.remove('color' + (i - 1));
divClass.classList.add('color' + i++);
}, 5000);
Your numbers are more than likely getting treated as a string because you are concatenating with a string. By placing items within parentheses, they will be executed as numbers (because anything in parentheses get run first) then concatenated as a string.
Use instead:
element.className = 'other const clases' + 'color'+ i;
You have to change full string of class or change it in 2 steps with for example regex and then assign it again.
