My JavaScript file isn't linking to my HTML file

Question

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/main.css">
    <script src="./main.js"></script>
    <title>Florida Plan - Financing and Planning</title>
</head>
</html>

Internal JS works fine and I wouldn't mind using it, but I want to start getting into the habit of using external JS files. I've tried linking it, and it doesn't seem to work. I gave it a small test with just one line of code... Also, it didn't correct itself after adding a semi-colon.

document.getElementById("rent").innerHTML = "56" // external

Internal worked

 <script>
    document.getElementById("rent").innerHTML = "56" // internal
 </script>

It only seemed to work in the script tag inside the HTML document. I've also tried specifying full paths to the file, which is in the same directory, it doesn't seem to work. Screenshot of directory. If anyone could help, it'd be great!

`./` before the file name suggests the same working directory as whatever HTML page this is. Is that the correct location? Do you see any errors in the console? — Professor Abronsius, Dec 22 '21 at 07:53
If main.js is loaded in the `head` then **nothing** is loaded in the body yet, and so `document.getElementById("rent")` will return null - I'm not putting this as an answer as there's probably 1000 duplicates of this question this year alone — Bravo, Dec 22 '21 at 07:54
`it didn't correct itself` - code rarely does *correct itself* - if it did, programmers would be out of a job — Bravo, Dec 22 '21 at 07:55
The problem is that the `head` loads before the body so when you call that function the DOM has not fully loaded. Place the code within a `DOMContentLoaded` event listener — Professor Abronsius, Dec 22 '21 at 07:55
@Bravo do you mean that executing the same code many times in a row hoping that a bug will disapear doesn't work? :p — Cid, Dec 22 '21 at 07:58
Put the code into a `window.addEventListener("load",function() { document.getElementById("rent").innerHTML = "56" });` — mplungjan, Dec 22 '21 at 07:59
@ProfessorAbronsius Thanks for helping and explaining it to me! This is all new to me so I'll definitely go look that up. I did see an error in the console...definitely something about "null" and a message port closing before the message was received...something like that — Jp Lawrence, Dec 22 '21 at 08:02
@mplungjan must the load function wrap all my code? since that one line is basically what I need to display a bunch of values — Jp Lawrence, Dec 22 '21 at 08:05
No, only needs to wrap the code that accesses an element not yet rendered to the page when the script iss loaded — mplungjan, Dec 22 '21 at 08:09
You can also do `const addNumber = function() { document.getElementById("rent").innerHTML = "56" }; window.addEventListener("load",addNumber);` — mplungjan, Dec 22 '21 at 08:11
@mplungjan okay cool...yeah this makes sense! it should be all good from here. Thanks for reaching out — Jp Lawrence, Dec 22 '21 at 08:19

My JavaScript file isn't linking to my HTML file

0 Answers0