JavaScript Method not Running

Question

I have been trying to get this method to run, but I couldn't get it to work. It was working when I kept my JavaScript methods within the HTML, but now that I moved the JavaScript into an external file, it is not doing anything:

This is my html:

<head>
    <title>TheNewTao Developer</title>
    <link rel="stylesheet" href="main.css" type="text/css">
    <script src="/script.js" type="text/javascript"></script>
</head>
<body onload="greetings()">

I want the method greetings() to run as soon as the page is loaded. This is my script.js file

function greetings() {
  var name = prompt('Hello, what is your name');
  document.getElementById('username').innerHTML = 'Welcome to the web ' + name;
}

All files are in the same folder. Does anyone know why it is not working?

Does the network tab show the JS file being loaded correctly? BTW, why are you using `innerHTML` to set the text content of an element? — , Mar 14 '16 at 16:58
Possible duplicate of [How can I debug my JavaScript code?](http://stackoverflow.com/questions/988363/how-can-i-debug-my-javascript-code) — Liam, Mar 14 '16 at 16:59
Unless you answer the question of whether the network tab shows the JS file being downloaded correctly or not, the question is in danger of being close-voted for not providing the information necessary to give a solution. If you don't know what devtools is or how to view its network tab, then please delete the question, [go study how to do that](https://developers.google.com/web/tools/chrome-devtools/), then repost if you still have problems. — , Mar 14 '16 at 17:51
Have you tried putting your JS on the page between `script` tags to cancel out any weird path issues? — cchambers, Mar 14 '16 at 18:00
This might help: http://stackoverflow.com/questions/34388726/cannot-find-js-file. — , Mar 14 '16 at 18:01
@cchambers He already said the code was working when inside the HTML. — , Mar 14 '16 at 18:01
Whoops, missed that. Is it possible that the HTML isn't formatted correctly? The provided HTML is missing `html` and closing `body` tags. — cchambers, Mar 14 '16 at 18:02
BTW, the `type="text/javascript"` is unnecessary (as is `type="text/css"`). — , Mar 14 '16 at 18:19
I'm strongly suspecting you don't understand Chrome devtools or the console, because if you did you would have reported a console message such as `"Uncaught ReferenceError: greetings is not defined"`. Do you know what devtools and the console is? — , Mar 14 '16 at 18:37

score 2 · Answer 1 · answered Mar 14 '16 at 16:57

2

If both files are in the same directory change:

<script src="/script.js" type="text/javascript"></script>

To:

<script src="./script.js" type="text/javascript"></script>

answered Mar 14 '16 at 16:57

Jonathan.Brink

23,757
20
73
115

What does the `./` do/ – Mar 14 '16 at 17:00
2

Starting a path with a dot means to reference things _relatively_. So if your `index.html` is at the same location as `script.js` using `./` basically means to look in same directory. – Jonathan.Brink Mar 14 '16 at 17:01
1

But it will look in the same directory anyway without the `./`. – Mar 14 '16 at 17:02
The `./` is just a good practice to be explicit and not depend on a default – Jonathan.Brink Mar 14 '16 at 17:03
I changed it and still nothing – Pablo Mar 14 '16 at 17:06
@Pablo did you check using a tool like chrome's dev-tools that the file was downloaded properly? – Jonathan.Brink Mar 14 '16 at 17:07
It seems only my css and HTML file were downloaded, how can I make are the js file is downloaded as well? – Pablo Mar 14 '16 at 17:11
Did you get a 404? Perhaps your `script.js` is not in the correct location? – Jonathan.Brink Mar 14 '16 at 17:13
@Pablo You can see what HTTP response you're receiving by clicking on the file and looking at the "Headers" tab in chrome: [screenshot](http://i.imgur.com/18rG7w6.png). – h2ooooooo Mar 14 '16 at 17:21

score 1 · Answer 2 · edited Mar 14 '16 at 17:55

1

The reason is the forward slash in your script src path. Remove the '/'

<script src="script.js" type="text/javascript"></script>

I've tested this out in plunkr and it seems to work...

https://plnkr.co/edit/MlkxUF7R31jmBwgWqTE7

My guess is your script.js file is located somewhere else

edited Mar 14 '16 at 17:55

answered Mar 14 '16 at 16:58

Nick Delaney

601
5
15

Odd where is your script.js file located Pablo? – Nick Delaney Mar 14 '16 at 17:12
Same folder as my HTML and css – Pablo Mar 14 '16 at 17:15

JavaScript Method not Running

2 Answers2