Javascript file is not working with HTML

Hello I am fairly new to web design and have been having a lot of trouble sourcing Js files into my html web page. Here are my files:
Html Part

<div id="content">
	<div id="title">Howdy
		<span id="name">friend</span>!</div>
	<div id="note">Take a look around...</div>
<script src="js/stjs.js"></script>

Javascript Part

var username;
var message;
username = 'Molly';
message = 'See our upcoming range';

var elName = document.getElementById('name');
elName.textContent = username;
var elNote = document.getElementById('note');
elNote.textContent = message;

Hi @egarcia33x3, what is the problem you’re having, is the file not loading at all?
Maybe try using an absolute path like so for your script:

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

Hope that helps

I think it has to do with the location of the file, it worked when I changed that portion into:

But this method didn’t work for another file with a similar problem.

Can you describe/draw your file/folder structure? A screenshot maybe?

I followed the structure from the book “Javascript and Jquery Interactive front-end and web development tool”
a main JavaScript Projects folder is saved onto the C drive, then a sub folder with named “c02” which is the name of the chapter, then another sub folder which holds my html file and a separate folder titled “js” which holds the javascript file.

I followed the same steps as the book so I do not know how it would not work with my file.

Are you running a local web server. If not you probably should be.

Yes, having an HTML page trying to access a file from the file system is not what you want.

That is, instead of having a src like file://C it should be either an absolute path like http://localhost/javascript/myjavascriptfile.js or a relative path to the file that is under the “localhost” domain.

My recommendation is to install node js and use the http-server package to run a local server on your machine for development. You always want to use machine/environment agnostic file paths so that projects can easily be uploaded to other server environments like production with minimal changes.

Let me give that a try, any beginner tutorials to help me set that up?
Thanks again!

Install node js for your machine and follow the directions on the http-server package page.

Or try usbwebserver, which you just have to download and extract to a folder. Zero configuration required to make it work. Create a folder for each test site and save the files and sub folders in the site’s folder.

Includes php and mysql as well as running a web server.

Very much easier to use than some of it’s rivals.

And as mentioned above, don’t hard code a script to you c: drive, as it will never work online.

You mentioned this folder C:/JavaScript%20Projects/c02/js/stjs.js

Are your html files in this one C:/JavaScript%20Projects/c02 or somewhere else?
For src=“js/stjs.js” to work, the html files should be in the folder immediately above js

you should have a folder structure similar to this
sitename/www - where the html files live
sitename/imagedump for original images which get edited and saved in the www/images folder
sitename/docs for documents and other stuff about the site. for example a collection of documents / clips from other sites about each page’s topic that you are going to take parts from and re-write to make the page.

I’d normally structure my projects something like this

using this to test before I start any development, that way I know everything is connected.


<!DOCTYPE html>
  <head lang="en">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Sample Project Folder Demo</title>
    <link rel="stylesheet" href="css/style.css">
    <h1>Sample Project Folder Demo</h1>
    <img src="images/sample.jpg">
    <script src="js/script.js" charset="utf-8"></script>


body {
  background-color: red;


console.log('script.js says "I\'m here"');

which gives this

1 Like

I would argue that installing a local LAMP environment for serving up static files is an over kill. All you need to do with http-server is install it via npm and and run a single command in the terminal. To each their own.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.