add script to head that runs after the body has been loaded

Question

How to add myFunction() in head that runs only after the body has been loaded. The reason I want to have it inside head is because that way I could put it in only one file instead of multiple.

Currently I have <body onload="myFunction()"></body> which works perfectly. But this needs to be added to multiple files.

Example

<head>
  <style>
    .codetext {
      font-family: monospace;
    }
  </style>

  <script>
    myFunction = function () {
      let links = document.querySelectorAll("a");
      links.forEach(elem => elem.classList.add("codetext"));
    }
 document.body.onload("myFunction"); <!--Doesn't Work-->
  </script>
</head>

<body>
  <a href="">Click Here</a>
</body>

This question may already have been answered here: https://stackoverflow.com/questions/799981/document-ready-equivalent-without-jquery — Snowmonkey, Feb 24 '19 at 19:34

score 2 · Accepted Answer · answered Feb 24 '19 at 19:50

2

You can use global load event

<script>
  onload = _ => 
    document.querySelectorAll("a").forEach(elem => elem.classList.add("codetext"))
</script>

answered Feb 24 '19 at 19:50

guest271314

1
10
82
156

jo_va · Answer 2 · 2019-02-24T19:42:55.597

Use document.body.onload = handler. See this answer for more details.

<head>
  <style>
    .codetext {
      font-family: monospace;
    }
  </style>

  <script>
    document.body.onload = () => {
      const links = document.querySelectorAll('a');
      links.forEach(elem => elem.classList.add('codetext'));
    }
  </script>
</head>

<body>
  <a href="">Click Here</a>
</body>

Or you can use window.onload = handler.

score 1 · Answer 3 · answered Feb 24 '19 at 19:34

You can use

 document.querySelector('body').onload

<head>
  <style>
    .codetext {
      font-family: monospace;
    }
  </style>

  <script>
    document.querySelector('body').onload= function myFunction() {
      let links = document.querySelectorAll("a");
      links.forEach(elem => elem.classList.add("codetext"));
    }
 //document.body.onload("myFunction"); <!--Doesn't Work-->
  </script>
</head>

<body>
  <a href="">Click Here</a>
</body>

score 1 · Answer 4 · answered Feb 24 '19 at 19:34

TypeError: document.body.onload is not a function

you need to assign your function to onload : document.body.onload = myFunction;

<head>
  <style>
    .codetext {
      font-family: monospace;
      color: red;
    }
  </style>

  <script>
    myFunction = function() {
      let links = document.querySelectorAll("a");
      links.forEach(elem => elem.classList.add("codetext"));
    }
    document.body.onload = myFunction;
  </script>
</head>

<body>
  <a href="">Click Here</a>
</body>

not sure, i'm using firefox and i'm not getting the error – Taki Feb 24 '19 at 19:48 — Taki, Feb 24 '19 at 19:48

score 0 · Answer 5 · answered Feb 24 '19 at 19:36

Use

document.body.addEventListener("load",functionToAssingn)

to add onLoad event:

<head>
  <style>
    .codetext {
      font-family: monospace;
    }
  </style>

  <script>document.body.addEventListener("load",myFunction)
    myFunction = function () {
      let links = document.querySelectorAll("a");
      links.forEach(elem => elem.classList.add("codetext"));
    }
  </script>
</head>

<body>
  <a href="">Click Here</a>
</body>

add script to head that runs after the body has been loaded

5 Answers5