SHARE

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 ==========

https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1RvylH38dKuET

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

https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT

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

https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGGNrgh4ZgYE6Cc

========== 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

11 COMMENTS

  1. 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..

    MY HTML CODE:

    <!DOCTYPE html>

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

    </head>

    <body>

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

    <p>Select Gender: <br>

    <p>

    <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>
    </select>
    </p>

    <div>
    <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;">

    </div>

    </body>
    </html>

    MY JAVASCRIPT

    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.

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

    Keep up the great work Ninja!

  3. 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?

  4. 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?

  5. 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?

  6. 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 REPLY

Please enter your comment!
Please enter your name here