I have one section where i have 3 headings for that section and I want to show them one by one with interverl of 10 seconds
it would be like at the strat you will have one heading and its content and then after 10 second the text inside the heading will change and after 10 seconds it will change aagin
<h2>helllo world</h2>
<h2>helllo world 2</h2>
<h2>helllo world 3</h2>
i have 3 headings and have to show them one by one,
in my code i have did like this disabled all and then showed one but i am having problem to loop it
<body>
<h1>hellow orld</h1>
<h1>hellow orld2</h1>
<h1>hellow orld3</h1>
<script>
let myarr = document.querySelectorAll('h1');
let myindex = 0;
console.log(myarr)
for (let index2 = 0; index2 < 10000; index2++) {
one();
setTimeout(impFunct, 1000);
}
function one() {
myarr.forEach(element => {
element.style.display = 'none';
});
myarr[myindex].style.display = 'block';
}
function impFunct() {
if(myindex==2) {myindex=0; return;}
myindex++
console.log(myindex);
}
</script>
</body>
all I am doing this to work in wordpress if you know any plugin or any method to do the same.
Pls help
<!DOCTYPE html>
<body>
<h1>hellow orld</h1>
<h1>hellow orld2</h1>
<h1>hellow orld3</h1>
<script>
let myarr = document.querySelectorAll('h1');
let myindex = 0;
timeout();
function timeout() {
setTimeout(function () {
myarr.forEach(element => {
element.style.display = 'none';
});
myarr[myindex].style.display = 'block';
if(myindex == 2){
myindex = 0;
} else {
myindex++;
}
timeout();
}, 1000);
}
</script>
</body>
</html>
<body>
<h1>hellow orld1</h1>
<h1>hellow orld2</h1>
<h1>hellow orld3</h1>
<script>
let headings = document.querySelectorAll('h1');
let currentHeading = 0;
headings.forEach(heading => heading.style.display='none')
const showNextHeading = (intervalId) => {
headings.forEach((heading, i) => {
i === currentHeading
? heading.style.display = 'block'
: heading.style.display = 'none'
})
currentHeading +=1
// if you don't want headings to keep changing forever uncomment line bellow
// if(currentHeading === 3) clearInterval(intervalId)
if (currentHeading === 3) currentHeading = 0
}
showNextHeading()
const intervalId = setInterval(() => showNextHeading(intervalId), 1000);
</script>
</body>