How can we change heading with respect to time using javascript?

I want to change the heading of the web page. Like I have

<h1>hey there!</h1>

so want to change this heading text with another text with respective time.
and changes should be in the loop.

like I used my values to be store in an array.
eg. var values = [ ‘hi’, ‘hello’, ‘bye’]
how can I use the set.timeout function in for loop to change those values continuously.

5 thoughts on “How can we change heading with respect to time using javascript?”

  1. One solution would be:

    // Retrieve the h1 element as a DOM object. 
    // Providing you have only one h1 element in your page, which should be 
    // the case, this should work fine.
    const h1 = document.querySelector('h1'); 
    
    // Iterate over all the values in the array.
    for(let i = 0; i < values.length; i++){
    
        // Use the innerText property to change the value contained within the 
        // h1 element.
        setTimeout(() => h1.innerText = `${values[i]} there!`, 1000 * (i));
    
    }
    

    This will set the first value immediately, the second value one second later, the third two seconds later and so on.

    Let me know if this is not what you are wanting to do.

    Reply
  2. Check this

     <!DOCTYPE html>
        <html>
        <body>
        
        <h1>JavaScript can Change HTML</h1>
        
        <script>
        var count = 0;
        var titleList = [ 'hi', 'hello', 'bye'];
        var intervalsFunc = setInterval(function(){ 
            document.getElementsByTagName("h1")[0].innerHTML = titleList[count];
            count++
         },
         3000);
         if(titleList.length >= count){
         myStopFunction()
         }
         function myStopFunction() {
          clearInterval(intervalsFunc);
        }
        
        </script>
        
        
        </body>
        </html>
    
    Reply
  3. You can try like this.

    $(document).ready(function () {
        var values = ['hi', 'hello', 'bye'];
        var totalArraylength = values.length;
        var counter = 0;
        setInterval(() => { 
            if(counter<totalArraylength){
                $('h1').html(values[counter]);
                counter += 1;
            }else{
                counter = 0
            }
        }, 1000);
    });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <h1>hey there!</h1>
    Reply
  4. Title can be changed by using the title tag. If you wanna count how many times for the loop, you can implement it by taking a look on the above answers.

    const title = document.querySelector('title')
    const values = [ 'hi', 'hello', 'bye']
    
    
    values.forEach((elem) => {
       setInterval(() => {
           title.innerText = elem
       }, 2000)    
    })
    
    Reply

Leave a Comment