Changing content via javascript on load

Question

I added the following script to my html body:

<script type="text/javascript">
    function customizeNavbar() {
        var d = document.getElementById("navwrap");
        d.classList.add("container");
        var e = document.getElementById("navhead");
        e.classList.add("container");
    }
</script>
<script onload="customizeNavbar();"></script>

It's not running my function on load.

Clicking some element <div onclick="customizeNavbar();" /> behaves as expected.

What can I do to get this page to run my script on load?

Context

This is found in the body element. It's changing the navbar of a master layout to avoid having to update the master layout. The navbar comes before this script is reached.

Not sure why this is getting down-voted. Yet to have anyone provide a good explanation or a solution that actually works.

The second script tag has no content, and will never load. You shouldn't use the load event of the first script tag either — adeneo, Feb 17 '15 at 16:08
Why should I not? It appears to work. What problems does that cause? — Joseph Nields, Feb 17 '15 at 16:09
It's exactly the same as just removing the function wrapper and the onload handler, so why use it ? — adeneo, Feb 17 '15 at 16:10
I doubt an inline script would trigger `onload` at all, it is fired after finished loading of _external_ resources only. — Teemu, Feb 17 '15 at 16:22
If the script is within the body and after the elements it's referring, a very simple solution would be either to simply call `customizeNavbar()` at the end of the script, or use an [IIFE](http://stackoverflow.com/a/8228308/1169519). — Teemu, Feb 17 '15 at 16:40
Are you trying to get the function to run when a specific object loads? Because if you want it to run on the page load then you have viable solutions. — Rorrik, Feb 17 '15 at 21:14

Waxo · Answer 1 · 2015-02-17T16:24:11.537

you must try that :

<script id="someId" type="text/javascript">
    function customizeNavbar() {
        var d = document.getElementById("navwrap");
        d.classList.add("container");
        var e = document.getElementById("navhead");
        e.classList.add("container");
    }
window.onload = setTimeout(customizeNavbar, 1);
//or
document.getElementById("someId").onload = setTimeout(customizeNavbar, 1); //and you can put it anywhere in your code i think
</script>

the setTimeout of 1ms is a little overated, but we're never sure enough

Edit:

The onload event occurs after an element is charged that's why you have to put it on the same element. source: http://www.w3schools.com/jsref/event_onload.asp

window.onload is called at the end of the DOM loading and elt.onload is called at the end of this element loading. Then in both cases the full DOM or the needed DOM is loaded — Waxo, Feb 17 '15 at 16:33

score 0 · Answer 2 · answered Feb 17 '15 at 16:09

0

Use the onload event of the window, not the script element.

function customizeNavbar() {
 ...
}

window.onload = customizeNavbar;

The onload event of a script doesn't necessarily tell you if the whole DOM is ready, only if that particular script loaded, and since you used it on an empty script, it will never load.

answered Feb 17 '15 at 16:09

MrCode

59,851
9
76
106

This is a correct way and convetional way to do it without extra libraries. You got my vote. – Steven Lacks Feb 17 '15 at 16:22
1

@JosephNields If this doesn't work for you, you're doing something wrong. – Teemu Feb 17 '15 at 16:42
It displays it incorrectly to start, and then it makes changes. I don't want that. It should display correctly to begin with. – Joseph Nields Feb 17 '15 at 21:18

score 0 · Answer 3 · answered Feb 17 '15 at 16:10

0

<head>
<script type="text/javascript">
    function customizeNavbar() {
        var d = document.getElementById("navwrap");
        d.classList.add("container");
        var e = document.getElementById("navhead");
        e.classList.add("container");
    }
</script>
</head>
<body onload="customizeNavbar();"></body>

put the onload on the body

answered Feb 17 '15 at 16:10

Oli Soproni B.

2,938
3
19
45

I can't put the onload on the body. This is within the body. – Joseph Nields Feb 17 '15 at 16:35

score 0 · Answer 4 · answered Feb 17 '15 at 21:09

You should call customizeNavbar in the onload event of the body element, not in the onload of a separate script. Take a look here:

<!DOCTYPE html>
<html>
<body onload="myFunction()">

<h1>Hello World!</h1>

<script>
function myFunction() {
    alert("Page is loaded");
}
</script>

</body>
</html>

As you can see, myFunction is defined inside a script and is assigned to the onload event of the body. As you can see, it works! Now, your code should be changed the following way:

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">
            function customizeNavbar() {
                var d = document.getElementById("navwrap");
                d.classList.add("container");
                var e = document.getElementById("navhead");
                e.classList.add("container");
            }
        </script>
    </head>
    <body>
        <!--some HTML-->
    </body>
</html>

score 0 · Answer 5 · answered Feb 17 '15 at 21:17

The following allows the function to be called immediately when encountered, and then to be called again once the window is fully loaded, in case the DOM has not yet loaded, if that is really a concern.

<script type="text/javascript" onload="customizeNavbar();">
    function customizeNavbar() {
        var d = document.getElementById("navwrap");
        d.classList.add("container");
        var e = document.getElementById("navhead");
        e.classList.add("container");
    } window.onload = customizeNavbar;
</script>

Tigerman55 · Answer 6 · 2015-02-17T17:13:34.010

-1

Due to jQuery's popularity, I've responded using jQuery methods. Once you've included jQuery to your HTML webpage, all you need to do is change your script to this:

<script type="text/javascript">
  $(document).ready(function(){
    function customizeNavbar() {
      $('#navwrap').addClass('container');
      $('#navhead').addClass('container');
    }

    customizeNavbar();
  });
</script>

For more information, take a look at the $( document ).ready() documentation. Using the above code, you don't even need the onclick part of your code. In my opinion, it saves time.

edited Feb 17 '15 at 17:13

answered Feb 17 '15 at 16:08

Tigerman55

203
8
18

1

This is semi-semi. First you write `$(document).ready()` instead of looking up the non-jquery way, but then you kept the non-jquery `document.getElementById("navhead");` instead of `$('#navhead')`. Either all-jQuery or no-jQuery is my opinion. – Daniel W. Feb 17 '15 at 16:29
@DanFromGermany thank you sir for your explanation. I hate it when people downvote, then don't explain why. I will keep your answer in mind. You are absolutely correct. – Tigerman55 Feb 17 '15 at 16:54

Changing content via javascript on load

6 Answers6