CODEWITHSUNDEEP
javascripthtml
Dalibor
Dalibor

Reputation: 1

dom elements load before script

This is an example from a site. Everything is done in an html document and works well. When I separate .js .html and .css then it happens that the script is loaded before the dom of the elements and i can't use button than. When I put it( ) right above the closing body tag then it also works. I would like to put my src of script in the head. html

// Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on the button, open the modal
btn.onclick = function() {
    modal.style.display = "block";
};

// When the user clicks on <span> (x), close the modal
span.onclick = function()  {
    modal.style.display = "none";
};

// When the user clicks anywhere outside of the modal, close it
window.onclick = function (event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
};
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
} 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Something new</title>
    <meta name="viewport" content="width=device-width initial-scale=1.0;">
    <link rel="stylesheet" href="style-ourwork.css" type="text/css">
    <script src="js-ourwork.js"></script>
</head>
<body>

<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>

<!-- The Modal -->
<div id="myModal" class="modal">

    <!-- Modal content -->
    <div class="modal-content">
        <span class="close">&times;</span>
        <p>Some text in the Modal..</p>
    </div>

</div>
<script src="js-ourwork.js"></script>
</body>
</html>
I know for window.onload = function() but which function to call here .

Upvotes: 0

Views: 3045

Answers (2)

Drew Landgrave
Drew Landgrave

Reputation: 51

In your js file wrap all of it in the following

(function(obj){
    // Your code here
})(window);

This will make it wait until the Dom has loaded to execute

Same as jQuery's

$(document).ready(function(){})

You should consider leaving the script tags at the bottom of the body though. Putting them in the head tag can slow your initial page load speed as your js gets larger.

I.e. the Dom won't load until all the stuff in the head tag is downloaded so your users will just see a blank screen until your js is loaded in.

If you put it at the bottom of the body tag they'll see your page before the js is loaded.

Upvotes: 0

Fenton
Fenton

Reputation: 250822

Adding your script tags just before the </body> tag has the benefit of having the DOM available when you run your scripts. The DOM must be loaded for you to interact with it (specifially, the elements you target must exist when you attempt to interact with them).

Adding your script to the <head> tag, and then deferring its execution with window.onload can slow down the perceived load time of your page, and the script will usually run later than if you just put it immediately before the </body> tag. You also need to be manage your calls as multiple window.onload = function() {}; statements will cause the event to be overwritten.

You may also want to take a look at JavaScript modules, as they are gong to become the prevalent mechanism for loading scripts asynchronously and are now part of the ECMAScript standard.

Upvotes: 2

Related Questions