Run JS in script only after page load

Question

I am trying to write some JS in the <head> of the document that changes some text after a date search is performed. Specifically, if the search did not show any results based on those dates.

This is via a code snippet section in the website builder, so I do not have direct access to the document. Only adding JS into <script><script/> that is added to the <head> of the doc.

I have tried:

<script>

document.getElementsByClassName("font-size-md")[0].setAttribute("id", "myId");
document.getElementById("myId");
myId.innerHTML = "Write Your Text Here";

</script>

This only modified the inner HTML after a refresh of the page.

I have also tried:

<script>

body = document.getElementsByTagName("body")[0];
body.onload = function() {
document.getElementsByClassName("font-size-md")[0].setAttribute("id", "myId");
document.getElementById("myId");
myId.innerHTML = "Write Your Text Here";
};

</script>

However, this seems to flat out not work.

Any suggestions?

You can have a look at `window.onload` vs `document.onload` https://stackoverflow.com/questions/588040/window-onload-vs-document-onload — David Leuliette, Jun 11 '20 at 10:53

score 1 · Answer 1 · answered Jun 11 '20 at 13:22

1

You dont need jQuery for it:

<script>
  document.addEventListener("DOMContentLoaded", function(event) {
         // your code
  });
</script>

answered Jun 11 '20 at 13:22

ChrisG

202
2
13

So I used ``` ``` However, it does render the modified HTML at all at this point. Any clue why? – Ro-Art Jun 16 '20 at 13:49
Sorry, i do not understand the problem. – ChrisG Jun 17 '20 at 07:39
My bad, there was a typo. I meant to say "However, it does NOT render the modified HTML at all at this point. Any clue why?" – Ro-Art Jun 22 '20 at 07:26

Gyan Jyoti Das · Answer 2 · 2020-06-11T15:24:47.507

-1

put the script below the <body></body> tag

<script>
    window.addEventListener("DOMContentLoaded", function() {
        // do stuff
    });
</script>

or you can use jquery

<script>
    $( document ).ready(function() {
        // do stuff
    });
</script>

edited Jun 11 '20 at 15:24

answered Jun 11 '20 at 12:33

Gyan Jyoti Das

387
2
7

Run JS in script only after page load

2 Answers2