D4mations.com

JavaScript Tutorial For Beginners #41 – Window onLoad Event



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

d4mer

, , , , , , ,

23 responses to “JavaScript Tutorial For Beginners #41 – Window onLoad Event”

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

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

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

Leave a Reply