JS novice to ninja

I am currently reading the book java script novice to ninja, for some reason the code in the book is not working for me. I have it word for word. It has something to do witth the linking of the files the html file “src =” it does not link to other files, can someone explain why?

saved as index.htm

<!doctype html>
<html lang="en">
  <meta charset="utf-8">
  <meta name="description" content="A quiz game for ninjas">
  <meta name="author" content="DAZ">
  <title>Quiz Ninja</title>
  <link rel="stylesheet" href="css/style.css">
<h1>Quiz Ninja!</h1>
<script src="js/scripts.js"></script>

saved as stles.css

  margin: 0;
  padding: 0;

header {
  font: bold 36px/120% Arial, Helvetica, sans-serif;
  background: #333;
  color: #c00;
  text-transform: uppercase;

saved as scripts.js

// welcome the user
alert("welcome to Quiz Ninja!");
1 Like

Do you have your css and js files in the subdirectories relative to the index.html file?

  • So if you have index.html in c:\JSNinja (i.e. c:\JSNinja\index.html)
  • Is styles.css in c:\JSNinja\css (i.e.c:\JSNinja\css\styles.css)
  • is scripts.js in c:\JSNinja\js(i.e. c:\JSNinja\js\scripts.js)
1 Like

I have them all saved in one folder on my desktop. should i do something different

That’s why it’s not working - the files aren’t where you say they are. These two lines are telling the browser that the separate files are in separate directories

<link rel="stylesheet" href="css/style.css">
<script src="js/scripts.js"></script>

You have two choices. The first would be to remove the folder directives for these two files

<link rel="stylesheet" href="style.css">
<script src="scripts.js"></script>

That will get you up and running quickly, but can be detrimental in the long run as your sites get more complex. It’s better to get into the habit of separating your files into common folder structures for maintenance in the future. So (IMHO), the better approach would be to go into your desktop folder and create two folders inside it, one called css, and one called js. Next, move the styles.css folder into the css folder, and the scripts.js folder into the js folder.

1 Like

Thank you for the assistance, I mostly understand, I still can not get it to work. I will keep trying.

Which bits aren’t you understanding? We can help.

Thank you so much for the help, I am understanding now. I didn’t fully understand where to put each file, but now i got it:

I need the HTML file on its own
the CSS files in its own CSS folder
the javaScript file in its own JS folder

right now it is working. once again thank you so mcuh


That’s good. I’d just recreated your code and it’s working fine. Here’s a screenshot of what I’m seeing in Atom, so you can compare it with your own.

On other thing, you would normally put your script tag just before the closing </body> tag, rather than after it.

1 Like

Yeah, I am VERY new at this. I just deleted everything and started from scratch. Now it is working. Looking back on it, I did not have the files saved in the right place.

1 Like

one more question, Would this work if I were to use a flashdrive or external hard drive?

It should work on any storage so long as the paths are correct and the drive is available.

1 Like

thanks a lot

Definitely. There’s nothing there that requires any server-side processing, it all just runs in the browser. So long as things are as Sam suggests above, you’ll be fine.

Thank you very much for your help i appreciate it.

1 Like

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