• Thursday , 13 August 2020

JavaScript Tutorial For Beginners #41 – Window onLoad Event

Code Canyon

So in this JavaScript tutorial for beginners, I want to show you another kind of JavaScript event – the Window.onload event! The Window object in JavaScript represents the browser window of your web page, and the onload event is the completion of your web page loading.

Many times it’s useful to only start our JavaScript functions AFTER the window has fully loaded, so we can use this event to make sure that happens.

Any questions, fire away :).

SUBSCRIBE TO CHANNEL – https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub_confirmation=1

========== JavaScript for Beginners Playlist ==========

========== CSS for Beginners Playlist ==========

========== HTML for Beginners Playlist ==========

========== The Net Ninja ============

For more front-end development tutorials & to black-belt your coding skills, head over to – https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk

========== Social Links ==========

Twitter – @TheNetNinja – https://twitter.com/thenetninjauk

Original source

3d Ocean

Related Posts


  1. Bobby De La Vega
    January 30, 2019 at 02:21

    Absolute legend mate. Thanks brother 🙂

  2. Dora Emon
    January 30, 2019 at 02:21

    where is the github for this lesson?

  3. GroovySalmon
    January 30, 2019 at 02:21

    I don't know how this worked for you @NetNinja. I followed your tut to the point. However, only after adding the preventDefault(); to the code it worked for me? Are you working under other preconditions than I am?

  4. Geek Ninja
    January 30, 2019 at 02:21

    best tutorials thanks shuan you awesome

  5. IT Geeks
    January 30, 2019 at 02:21

    Nice Job Mate

  6. Leo Joao
    January 30, 2019 at 02:21

    A little suggestion, can I?
    It would be awesone if you give us your files to download, like the files on this vídeo, so we can download and use it to tests, like I don't know CSS and HTML yet, and looking to the codes on the files I would comprehend it better

  7. Amir.h Akbari
    January 30, 2019 at 02:21

    i think when using defer attribute in <script src = xxx defer ></script> file should work without creating onload event

  8. sweeta tamang
    January 30, 2019 at 02:21

    Can you please explain me why 'document.getElementById()' works only inside function 'setUpEvents' and not inside 'button.onclick fucntion()' ??

  9. Sulaimon Abdul-kareem
    January 30, 2019 at 02:21

    How did you know all this ??

  10. Hylke Nicola
    January 30, 2019 at 02:21

    my function consisting of actually 2 function doesnt work when i try it like this 🙁

  11. Ed Garzaro
    January 30, 2019 at 02:21

    Your instructions are so clear. Thank you for all of these awesome lessons!

  12. Kawsar Kamal
    January 30, 2019 at 02:21

    Excellent tutorial, thank you!

  13. aslı a
    January 30, 2019 at 02:21

    Can't we say window.onload = setUpEvents(); on the last line?

  14. Samuel Torres
    January 30, 2019 at 02:21

    Can you help me?

    I am trying to use <Select> and <option in HTML and onchange in javascript to make an image change depending on the selection made in a drop down menu. When I change the drop down option, nothing happens..


    <!DOCTYPE html>

    <title>Detect Event</title>
    <link rel="stylesheet" type="text/css" href="X_3_3.css">
    <script src="X_3_3.js"></script>



    <h3 class="headcolor">Exercise 3-3</h3>

    <p>Select Gender: <br>


    <select id="gender" name="gender" size="1">
    <option value="none">None</option>
    <option value="male">Male</option>
    <option value="female">Female</option>
    <option value="droid">Droid</option>

    <img id="myimg" src="http://profperry.com/testimages/default.jpg" style="display: none;">
    <img id="myimg" src="http://profperry.com/testimages/male.jpg" style="display: none;">
    <img id="myimg" src="http://profperry.com/testimages/female.jpg" style="display: none;">
    <img id="myimg" src="http://profperry.com/testimages/droid.jpg" style="display: none;">




    var $ = function (id) {
    return document.getElementById(id);

    var alertGender = function()
    var myGender = $("gender").value;

    if (myGender == ("male")
    $("myimg").src = "http://profperry.com/testimages/male.jpg&quot;;

    if (myGender == Female)
    $("myimg").src = "http://profperry.com/testimages/female.jpg&quot;;

    if (myGender == Droid)
    $("myimg").src = "http://profperry.com/testimages/droid.jpg&quot;;

    window.onload = function ()
    $("gender").onchange = alertGender;


    Can you tell me why nothing happens?

    Thank you.

  15. TD Portfolio
    January 30, 2019 at 02:21

    Nice job thanks.

  16. Abhijeet Kumar
    January 30, 2019 at 02:21

    Really helpful. Can you please tell how does it differ from "onpageshow" event?

  17. JSNode
    January 30, 2019 at 02:21

    That last music blows my ears.

  18. Anand Prakash
    January 30, 2019 at 02:21


  19. Bishop Bautista
    January 30, 2019 at 02:21

    Best javascript tutorials on the net…. though I would be using iife to accomplish this. :).

    Keep up the great work Ninja!

  20. daniel lif
    January 30, 2019 at 02:21

    i have 2 window.unload functions located in 1 js file. I need both to load on the same page (each have a different container name). Only 1 is loading. Why?

  21. Sniperyork
    January 30, 2019 at 02:21

    So in most cases, We don't use this technique, simply putting js link at the bottom of the document solves all the issues, is it not?

  22. Jesus Yebra
    January 30, 2019 at 02:21

    What's the difference between the way you set up those events? The last way you set it up is more code. I would prefer less. Does it actually matter?

  23. Fatimah ob
    January 30, 2019 at 02:21

    Hello, I did the js code in separate file but it didn't display in the browser, is there some sitting that prevent js code from displaying in fire fox browser?

Leave A Comment

You must be logged in to post a comment.