I have 5 sentences and I want after 3 seconds the next sentence's background to be colored
HTML:
<div class="text-slider">
<div class="text-wrap">
<p class="text text-1 active"> text 1</p>
<p class="text text-2">text 2</p>
<p class=" text text-3">text 3</p>
<p class="text text-4">text 4</p>
<p class="text text-5"> text 5 </p>
</div>
</div>
CSS:
.text-wrap p.active {
background-color: #edf0f2;
}
JS
let count = 1
setInterval(()=>{
document.querySelector(`.text-${count}`).classList.add('active')
count++
if(count>5){
count =1
}
}, 3000)
I want to remove class active from the previous element so I try
document.querySelector(`.text-${count -1}`).classList.remove('active')
after count++ but it doesn't work
Instead of finding an element with relative to the count, you can hack it a bit, and in your selector find active element and remove that active class from it as follows.
let count = 1;
setInterval(() => {
// Here you remove active class from `p` tag which had it
document.querySelector(".text.active").classList.remove("active"); // <- HERE
document.querySelector(`.text-${count}`).classList.add("active");
count++;
if (count > 5) {
count = 1;
}
}, 3000);
let count = 1;
setInterval(() => {
document.querySelector(".text.active").classList.remove("active");
document.querySelector(`.text-${count}`).classList.add("active");
count++;
if (count > 5) {
count = 1;
}
}, 1000);.text-wrap p.active {
background-color: #edf0f2;
}<div class="text-slider">
<div class="text-wrap">
<p class="text text-1 active">text 1</p>
<p class="text text-2">text 2</p>
<p class="text text-3">text 3</p>
<p class="text text-4">text 4</p>
<p class="text text-5">text 5</p>
</div>
</div>I refactored JavaScript file a bit:
let count = 1
setInterval(() => {
if (count > 5) {
document.querySelector(`.text-${count- 1}`).classList.remove('active')
count = 1
} else {
document.querySelector(`.text-${count}`).classList.add('active')
if (count > 1) document.querySelector(`.text-${count-1}`).classList.remove('active')
count++
}
}, 1000).text-wrap p.active {
background-color: #edf0f2;
} <div class="text-slider">
<div class="text-wrap">
<p class="text text-1 active"> text 1</p>
<p class="text text-2">text 2</p>
<p class=" text text-3">text 3</p>
<p class="text text-4">text 4</p>
<p class="text text-5"> text 5 </p>
</div>
</div>You need to use remove instead of add to delete the class, and I try to adjust your js code a little bit.
let count = 1;
setInterval((storage) => {
const clsName = 'active';
const current = `.text-${count}`;
const previous = storage.shift();
document.querySelector(previous)?.classList.remove(clsName);
document.querySelector(current).classList.add(clsName);
storage.push(current);
count = count % 5;
count++;
}, 1000, []).text-wrap p.active {
background-color: #edf0f2;
}<div class="text-slider">
<div class="text-wrap">
<p class="text text-1 active"> text 1</p>
<p class="text text-2">text 2</p>
<p class="text text-3">text 3</p>
<p class="text text-4">text 4</p>
<p class="text text-5"> text 5 </p>
</div>
</div>