Linking HTML and JavaScript Files

I’m trying to build a website, and am having trouble linking a JavaScript file to my HTML file. The path to the file is valid, but the JavaScript code is not influencing the web page in any way. Here is the start of the HTML file:

<!DOCTYPE html>
<html>
    <head>
        <title>Website Title</title>
        <meta charset="utf-8">
        <link href="../CssFiles/style.css" rel="stylesheet" type="text/css">
        <script type='text.javascript' src='../JavaScriptFiles/javascript.js'></script>
    </head>

Let me know if you see or know of a potential problem. Thanks!

<!-- HTML4 and (x)HTML -->
<script type="text/javascript" src="javascript.js"></script>

<!-- HTML5 -->
<script src="javascript.js"></script>

You can simply use the second one :wink:

Unfortunately I can’t use javascript.js as the source, because I was a bit disorganized with my files and put the javascript file in a separate directory. However, the path to the javascript file is correct, so I’m not sure why it’s not linking

Basically, this is not correct:

<script type='text.javascript' ...

It should be "text/javascript"

What I meant to say, though (sorry for not making it obvious), is that you can simply use the newer HTML5 element <script src="yourFile.js"></script>

Try it like this

<script src="../JavaScriptFiles/javascript.js"></script>
2 Likes

Thanks for catching that problem, but somehow it’s still not linking. I’m really not sure what the issue could be :frowning:

Hi, @plum6708. I suggest you check out this article by W3 Schools on the <script> tag.
For me, I think linking HTML to JavaScript is <script type="text/javascript" src="path-to-javascript-file.js"></script>.

Also, it is (for me) good practice to link your JavaScript just before the closing </body> tag. If you want to find out more about where to link, read this article.

I hope you can solve your problem! :wave:

You’ve all been really helpful, but I’m afraid the usual method of linking HTML to JavaScript just doesn’t seem to be working. If you have any other ideas to try, please let me know. Otherwise I won’t take any more of your time.

Thanks again!

If you’re running your code locally on your computer, it might be worth checking that your browser or security software aren’t blocking the execution of your JavaScript.

Also, can you post your JavaScript? It could be that nothing is happening because of an error in that file, rather than your HTML. :slight_smile:

1 Like

I’m running the code locally, but I’m using Chrome, so I would think that JavaScript is enabled. I’m not aware of any security software that would be blocking it. Here is a small segment of the JavaScript code, which I am using to test it’s functionality.

let test = document.getElementById('test');
test.onclick = test.style.backgroundColor = '#000000';

The HTML includes the following header to go along with it:

        <h1 id="test">Test</h1>

Currently, I get the following error in the console tab when I inspect the webpage:
script.js:2 Uncaught TypeError: Cannot read property ‘style’ of null
at script.js:2

1 Like

The only reason I can think of why this would happen is because the browser loads the document from top to bottom.

When it gets to your linked JavaScript file, which is in the <head> section of the document, the h1 element with ID test does not yet exist in the DOM (because the browser hasn’t got that far yet).

If you move the script tag to the very end of the <body>, that might fix your problem.

3 Likes

Thank you, it worked! FINALLY! I’d tried that before but I must have made some small changes since then.