The code seems to be malfunctioning in a separate JS file, but oddly enough, it functions properly when placed within a <script> tag

Question

The code seems to be malfunctioning in a separate JS file, but oddly enough, it functions properly when placed within a <script> tag

I am trying to create a loader, but I have encountered an issue where the script works when placed directly in the HTML file, but not when it is in a separate JavaScript file.

Here is the script:

var loader = document.getElementById("ld");
    window.addEventListener("load", function()
    {
      loader.style.display = "none";
    })

And here is the corresponding HTML code:

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Bilal el Badaoui">
<meta name="description" content="The best clothes for the best price">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c2a0adadb6b1b6b0a3b282f7ecf0ecf1">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="17757878636463657667572239253924">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>S&B Clothes</title>
    <link rel="icon" type="image/x-icon" href="logo/icons8-needle-96.png">
</head>

<body id="body">

<div class="loader" id="ld"></div>

</body>

javascript html css bootstrap-5

Answer 1

Answer №1

It seems like there's an issue with this block of code. Let's make a small tweak:

window.addEventListener("load", function()
{
  var loader = document.getElementById("ld");
  loader.style.display = "none";
})

Here's why this change is necessary: You have your JavaScript code in the head section of your HTML document. This means that it may execute before the entire DOM has finished loading. By moving your code inside the load event listener, you ensure that the element you are trying to select is available before you attempt any operations on it.

Answer 2

It seems like there's an issue with this block of code. Let's make a small tweak:

window.addEventListener("load", function()
{
  var loader = document.getElementById("ld");
  loader.style.display = "none";
})

Here's why this change is necessary: You have your JavaScript code in the head section of your HTML document. This means that it may execute before the entire DOM has finished loading. By moving your code inside the load event listener, you ensure that the element you are trying to select is available before you attempt any operations on it.

Answer 3

Answer №2

When reading the code, it is important to follow the sequence from top to bottom. Initially, the script is read without seeing the "ld" id because the script comes before the body tag. To ensure that the script can access items within the body, it should be placed after the div tag. Therefore, it is recommended to place the script at the end of the body section.

    <!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Bilal el Badaoui">
<meta name="description" content="The best clothes for the best price">
<link rel="stylesheet" href="style.css">
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2e4c41415a5d5a5c4f5e6e1b001c001d">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fe9c91918a8d8a8c9f8ebecbd0ccd0cd">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>S&B Clothes</title>
    <link rel="icon" type="image/x-icon" href="logo/icons8-needle-96.png">
</head>

<body id="body">

<div class="loader" id="ld"></div>

<script src="script.js"></script>
</body>

P.S. apologies for any English mistakes)

Answer 4

When reading the code, it is important to follow the sequence from top to bottom. Initially, the script is read without seeing the "ld" id because the script comes before the body tag. To ensure that the script can access items within the body, it should be placed after the div tag. Therefore, it is recommended to place the script at the end of the body section.

    <!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Bilal el Badaoui">
<meta name="description" content="The best clothes for the best price">
<link rel="stylesheet" href="style.css">
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2e4c41415a5d5a5c4f5e6e1b001c001d">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fe9c91918a8d8a8c9f8ebecbd0ccd0cd">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>S&B Clothes</title>
    <link rel="icon" type="image/x-icon" href="logo/icons8-needle-96.png">
</head>

<body id="body">

<div class="loader" id="ld"></div>

<script src="script.js"></script>
</body>

P.S. apologies for any English mistakes)

Answer 5

Answer №3

If you're experiencing difficulties with linking to your external JavaScript file, why not try inserting the code snippet below to see if it works? Additionally, could you confirm whether the JavaScript file is located in the same directory as your HTML file or in a separate directory? If both files are in the same directory, you should see a "hello world" message.

alert('hello world')
var loader = document.getElementById("ld");
    window.addEventListener("load", function()
    {
      loader.style.display = "none";
    })

Answer 6

If you're experiencing difficulties with linking to your external JavaScript file, why not try inserting the code snippet below to see if it works? Additionally, could you confirm whether the JavaScript file is located in the same directory as your HTML file or in a separate directory? If both files are in the same directory, you should see a "hello world" message.

alert('hello world')
var loader = document.getElementById("ld");
    window.addEventListener("load", function()
    {
      loader.style.display = "none";
    })

The code seems to be malfunctioning in a separate JS file, but oddly enough, it functions properly when placed within a <script> tag

Answer №1

Answer №2

Answer №3

Similar questions

Retrieve the 'id' value located within the 'img' tag of HTML code by utilizing Beautiful Soup in Python

The hyperlink functionality is disabled because Javascript is set to return false

Cannot add padding to the DIV element

Building a straightforward expandable/collapsible tree view with AngularJS by utilizing a particular data format

Converting text/plain form data to JSON using Node.js - step by step guide

What advantages and disadvantages come with using timeouts versus using countdowns in conjunction with an asynchronous content loading call in JavaScript/jQuery?

What is the procedure for renaming an item within a basic array in Angular?

Upon registration, the user's information is successfully stored in the mongoDB database, even if the selected "username" is already in

What is the best way to place a semi-transparent black overlay on an image?

Encountering an issue with Angular 5.2 application build on VSTS build server: Running into "CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory" error

React Error: The property 'i' cannot be read as it is undefined

Using Jquery: Removing the strikethrough effect upon the second click!

How can you align a list next to a set of images using HTML and CSS?

Would you like to place some text within a content box?

Can the jQuery live function be triggered without the need for an event?

It seems that BeautifulSoup and Selenium are unable to locate the div or text elements on the website

Error message in the browser console: Uncaught TypeError - The function allSections.addEventListener is not recognized

The TextField component in MUIv5 is showing some frustrating white space in the corners

What is the reason for all the buttons activating the same component instead of triggering separate components for each button?

Whenever I select a link on a navigation bar, it transports me to the desired section of the page. However, I often find that the navbar ends up