Make a HTML paragraph come on a delayed onload

Hi

So I have a text-paragraph in one of my pages in the app I am trying to create. I want this paragraph to appear “onload” when the page is clicked on. How can I make that happen?

I want the paragraph to keep all of its CSS styling and so on. But I want it to appear on a delayed onload when the page is loaded. Perhaps after two seconds.

It’s hard to picture exactly what you are wanting, but maybe you could animate the paragraph with 0 opacity on page load with an animation delay and then animate it to 1 opacity.

Yeah but I want to do it with Javascript to learn it :slight_smile: You mean animation through CSS right?

You could do it through setTimeout

and conditional css

Aha any idea how I would do this with this paragraph:

<div class="Sabretooth">
We arrange for tours.  </div>

   

 


<button class="button2" type="button">What do Huskies like to eat?</button>

    
    
     

      
       <div id="footer"></div>
       <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
       
       <script src="Javascript.js"></script>

In the JS-file I have out this one in but it does not work. Not sure why:

  function myFunction() {
        document.getElementsByClassName("Sabretooth").innerHTML= "Shark meat";
      }
    
    
      document.getElementsByClassName("button2").onclick=function(){
        myFunction();
      }

The above is an onclick. But I want to do it with an onload as well. My onclick does not shoot either.

getElements… is returning an array of matches (notice the S as in plural).

the onclick is supposed to be used on an object but you are using it on an array

To fix this, change it to get an id instead which will be unique and return an object instead