Onload for HTML-paragraph

JavaScript
1

Hi

So I have forgotten how to do this. Because it was a while since I did it. But I want my paragraph in the “about-page”, on the website I am building, to load after perhaps one second in a Javascript “onload” kind of thing.

So I have used the code below but nothing is happening. I am probably doing something wrong or perhaps in the incorrect order. The H1-tag in HTML has the class name “about”. The Javacript I am trying to apply to this HTML paragraph looks like below:


function closeForm() {
    document.getElementById("about").style.display = "block";
    }

    document.getElementsByClassName("about")[0].onmouseover=function(){
        openForm();
    }  


function openForm() {
        document.getElementById("about").style.display = "block";
        }
  

    document.getElementsByClassName("about")[0].onload=function(){
        openForm();
    }

This is inserted in the top of the js-file but it does not come onload. It is already there when the page is loaded.

2

You are using both getElementById and getElementsByClassName, does it have both an id and a class?

It would be easier to help if we can see a live example on something like Codepen.

3

If you want a specific part of your html to be dynamic you can create it and append it to the dom with JavaScript and put within a timeout of 1 second if you need it to be that specific delay

4 
const div = document.createElement("div");

setTimeout(() => {
  document.body.appendChild(div)
}, 1000)

As an example this node would not be put on the dom until a 1 second delay

5

I have now changed it to this because you saw that:

function closeForm() {
    document.getElementsByClassName("about")[0].style.display = "block";
    }

    document.getElementsByClassName("about")[0].onmouseover=function(){
        closeForm();
    }  


function openForm() {
        document.getElementsByClassName("about")[0].style.display = "block";
        }
  

    
    document.getElementsByClassName("about")[0].onload=function(){
        openForm();
    }

Still a bit confused though why it isn’t working :slight_smile:

Paragraph in HTMl looks like this:

  <h1 class="about">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </h1>
6

Hmm in what context do I insert that code? Can you tell me how it would apply to my code above? Or should I alter it completely perhaps?

7

I don’t get why you are calling closeForm onmouseover.

8

So lets say you keep everything the same except for the delayed element. Instead of having the delayed element as part of your html file rather have it made in your JS file and simply append it to the appropriate parent after a designated delay. You will need to apply its css in the JS file as well

9

I am doing that one because I want to see if it disappears when doing mouseover.

I am not going to have that one in the final version. I just want to create a slow “onload” so it loads when the website is loaded.

10

Is the delay just for an effect?

11

Ok, so the reason your code isn’t working is because the html already displays you h1 tag. And the openForm setting h1 display to block doesn’t do anything, because it already is display block.

12

This will work.

function closeForm() {
  document.getElementsByClassName("about")[0].style.display = "none";
}

function openForm() {
  document.getElementsByClassName("about")[0].style.display = "block";
}

closeForm();
setTimeout(openForm, 1000);
13

@ManasMahanand1 solution works fine, but this solution kind of follows what I had in mind

function createForm() {
  const h1 = document.createElement("h1");
  
  h1.innerText = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.";
  
  document.body.appendChild(h1)
}


setTimeout(createForm, 1000);

This will do the same thing

14

Yes your solution works as well. But I think writing html in Javascript might create spagetti code in the future if not maintained, so only dealing with what is to be dynamic only in JS might be the best option.

But I guess it depends on the situation.

15

Yeah precisely. An effect only

16

Works now. Thanks for that

17

This one worked for me. But it seems the CSS do not work for the paragraph that arises from that command. Any idea how to change the text that arises with CSS?

It becomes a lot bigger than it should and color does not apply to it in CSS. How do I target it with my CSS? Or is this not possible?

18

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.