how to show and hide heading every 10 seconds with javascript in wordpress-CodePudding

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

CodePudding user response：

<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>

CodePudding user response：

<!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>