Question 222746 in Html Question posted in
Some basic documentation can be found here.

html doesnt appear to connect properly to javascript file

I am creating a small, simple website for fun, and have an html file and a javascript file in the same directory. The trouble is, my html doesn’t appear to think that my javascript file exists at all.
It fails to run its function upon passing the load event, and doesn’t even print the first console.log to the console, leading me to believe that it hasn’t read any of the file whatsoever. What could be the problem here?

My html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Knight0Light</title>
    <link href="/style.css" rel="stylesheet" type="text/css" media="all">
    <script src="index_page_script.js"></script>
  </head>
  <body>
    <h1 id=randomHeader></h1>

    <p>So far, this website changes its header randomly whenever you reload it. I'm planning to put more cool stuff here later.</p>

  </body>
  
</html>

My Javascript:

console.log("It Starts");

function randomizeHeader() {
  console.log("It Runs");
}

window.addEventListener('load', randomizeHeader);

I have been banging my head against this for hours, and have encountered similar issues with javascript in the past. Please help me by pointing out whatever obvious thing I got wrong.

EDIT:
To confirm, the two files sit in the same directory, there is no output to console either – error message or otherwise. Fyi I am using neocities.

The filesystem:
file structure

The output:
Console and html output

Tags:

3

Answers


  1. 0

    Instead of adding the script tag in the head section of your HTML file, try adding it just before the closing body tag. This will ensure your HTML is fully parsed before your JavaScript is loaded.

      <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Knight0Light</title>
    <link href="/style.css" rel="stylesheet" type="text/css" media="all">
  </head>
  <body>
    <h1 id=randomHeader></h1>

    <p>So far, this website changes its header randomly whenever you reload it. I'm planning to put more cool stuff here later.</p>

    <script src="index_page_script.js"></script>
  </body>
</html>
    Login or Signup to reply.
  2. 0

    Double check your folder structure.

    Right now it assumes your index_page_script.js lives in the same folder as your HTML in the following line:

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

    Remember this src path is relative to your HTML page that’s running the script. So if your javascript file is in a folder you must write accordingly:

    <script src="some_folder/index_page_script.js"></script>

    Look up this link to understand how you can traverse the folder path relative to your HTML: https://learntheweb.courses/topics/naming-paths-cheat-sheet/#paths-folders

    Most likely you will be using ../ or / or a chained combination of these two.

    Login or Signup to reply.
  3. 0

    It looks like your page is not able to locate the file.
    Update your path with this.
    Note: This works if your javascript file is on the same directory

    <script src="./index_page_script.js"></script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search