My JavaScript file isn’t linking to my HTML file

<!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!