Why is my HTML onload event attribute ignored in the script element?

Question

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <h1>Test!!!</h1>
  <script onload="popup()">
    function popup() {
      console.log('popup function has been triggered!!!');
    }
  </script>

</body>

</html>

When the above page loads, I expect the onload attribute to cause function popup to fire but nothing happens. Where am I going wrong?

`onload` on a script tag works only when you're loading a resource. Since you are defining the function inline, it will not work here. You can either make it a self-initiating function or simply call it after the function definition. — HymnZzy, Dec 08 '20 at 16:57
jenkinz — `onload` has its uses, but given your simple example it's probably the wrong thing to be considering. You may be looking at an old old old tutorial? It's usually better to use the [DOMContentLoaded](https://developer.mozilla.org/docs/Web/API/Window/DOMContentLoaded_event) event as seen in [this SO answer](https://stackoverflow.com/a/800010/17300) or load a script with [defer](https://javascript.info/script-async-defer). — Stephen P, Dec 08 '20 at 18:15

score 4 · Accepted Answer · answered Dec 08 '20 at 16:53

On an element, the load event fires if the element requires a resource, once that resource has loaded. This applies to, for example, images and <script> tags which use separate files. Inline JavaScript tags do not require the downloading of resources, so they don't fire the load event: so, the

<script onload="popup()">

doesn't invoke popup.

Just run popup() in the plain script body:

<script>
    function popup() {
      console.log('popup function has been triggered!!!');
    }
    popup();
  </script>

If you want to wait for the whole DOM to be loaded, use a DOMContentLoaded listener:

window.addEventListener('DOMContentLoaded', popup);

score 1 · Answer 2 · answered Dec 08 '20 at 17:13

Execute a JavaScript immediately after a page has been loaded:

In HTML:

<body onload="console.log('popup function has been triggered!!!')">

In JavaScript:

window.onload = popup();
function popup()
{
    console.log('popup function has been triggered!!!');
}

In JavaScript, using the addEventListener() method:

window.addEventListener('load', popup)
function popup()
{
    console.log('popup function has been triggered!!!');
}

score -1 · Answer 3 · answered Dec 08 '20 at 16:54

-1

You have to pass the onload attribute to the body, not the script tag. ==> <body onload=fnc> Also, it would be good practice to add the defer attribute to your scripts tags so that they run after the DOM has loaded

answered Dec 08 '20 at 16:54

Hubert Hilczer

62
5

According to w3schools: "onload is most often used within the element to execute a script once a web page has completely loaded all content (including images, script files, CSS files, etc.). However, it can be used on other elements as well (see "Supported HTML tags" below)." And one of the tags it lists is – jenkinz Dec 08 '20 at 17:00
2

@jenkinz & Hubert .. `onload` works only if you are loading an element. script tag with inline function doesn't load anything. Even though moving it to the `body` works, it's not the right explanation here, – HymnZzy Dec 08 '20 at 17:06
1

Please refer to MDN documentation before downvoting someone who gave you the right answer. Your script tag doesn't support onload per se, as it would probably have a scope problem : where would the reference to the onload function be declared if the declaration is made after the script is executed? An alternative solution is to not use the onload tag but a call to the function inside your script tag, but I recommend that you use the defer tag to ensure your js executes after the dom has loaded. – Hubert Hilczer Dec 08 '20 at 17:08
@HymnZzy wrong, onload fires after and element has fully loaded, not while it is loading. So yes, if you want it to trigger after the DOM has loaded then body is the adequate place. If you want it to trigger when the script has been loaded, place it at the end of the script. – Hubert Hilczer Dec 08 '20 at 17:20
onload fires when ... well that depends on what it's attached to. The most commonly seen `window.onload` fires when "the page" has completed loading, which is when _everything_, all scripts, all images, _all_ external resources have finished loading. If it's attached to a particular resource it fires when _that_ resource has finished loading. I'm not even sure what it means when attached to the ``, because if that's what you want you should be using the [DOMContentLoaded](https://developer.mozilla.org/docs/Web/API/Window/DOMContentLoaded_event) event. – Stephen P Dec 08 '20 at 17:31

score -1 · Answer 4 · answered Dec 08 '20 at 17:11

-1

The onload isn't neccessary to kick off the function. I just needed to nonce it:

(That's nunjucks BTW.)

answered Dec 08 '20 at 17:11

jenkinz

67
6

Why is my HTML onload event attribute ignored in the script element?

4 Answers4