SHARE

Hey gang, in this final JavaScript DOM tutorial I’ll show you the DOMContentLoaded event.

—– COURSE LINKS:
+ Atom editor – https://atom.io/a
+ GitHub Repo – https://github.com/iamshaunjp/JavaScript-DOM-Tutorial

———————————————————————————————
Other tutorials:

—– JAVASCRIPT FOR BEGINNERS:
https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1RvylH38dKuET

—– CSS FOR BEGINNERS:
https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT

—– NODE.JS TUTORIALS
https://www.youtube.com/playlist?list=PL4cUxeGkcC9gcy9lrvMJ75z9maRw4byYp

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

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

21 COMMENTS

  1. your script can be in the head … you just need to give this script attribute 'defer' => <script defer src="app.js"></script>

  2. Was really fun to do this tutorial, i have been struggling a bit with javaScript, and DOM, and these tutorials really made it easier to get it for me 🙂 looking forward to check more videos of you guys in the future 🙂

  3. Shaun, thank you for this series. You are the best in the business! One thing I would add to this app – a method that clears the form after new book has been added to the list. I did some research and found that adding addForm.reset(); at the bottom of addForm submit callback function should do the trick.

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

  5. The question is what are the real advantages of using vanilla javascript vs jQuery in the context of DOM manipulation? jQuery seems to be more efficient with less code, isn't it?

LEAVE A REPLY

Please enter your comment!
Please enter your name here