Javascript file is not working with HTML

Get Started
, ,
1

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

<h1>Elderflower</h1>
<div id="content">
	<div id="title">Howdy
		<span id="name">friend</span>!</div>
	<div id="note">Take a look around...</div>
</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;
2

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

3

I think it has to do with the location of the file, it worked when I changed that portion into:
file:///C:/JavaScript%20Projects/c02/js/stjs.js

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

4

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

5

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.

6

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

7

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.

8

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.

9

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

10

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

11

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.

12

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
sitename/www - where the html files live
sitename/www/images
sitename/www/js
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.

13

I’d normally structure my projects something like this

1097Ă—414 67.8 KB

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

HTML:

<!DOCTYPE html>
<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">
  </head>
  <body>
    <h1>Sample Project Folder Demo</h1>
    <img src="images/sample.jpg">
    <script src="js/script.js" charset="utf-8"></script>
  </body>
</html>

CSS:

body {
  background-color: red;
}

JavaScript:

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

which gives this

750Ă—520 46 KB

1 Like
14

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.

15

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