Function defined in another .js file not found in NodeJS

Question

I am very new to Javascript and NodeJS.

Here is my website's code structure:

|source
|   | stylesheets
|   |    | index.styl
|   | templates
|        | default.jade
|        | homepage.jade
|static
|   | [.css generated]
|
|server.js
|package.json
|file.js

And here is server.js:

var express = require('express')
    , logger = require('morgan')
    , app = express()
    , templateHome = require('jade').compileFile(__dirname + '/source/templates/homepage.jade')        

app.use(logger('dev'))
app.use(express.static(__dirname + '/static'))

app.get('/', function (req, res, next) {
    try {
        var html = templateHome({ title: 'Home' })
        res.send(html)
    } catch (e) {
        next(e)
    }
})

app.listen(process.env.PORT || 3000, function () {
    console.log('Listening on http://localhost:' + (process.env.PORT || 3000))
})

My second .js file contains a simple function that should be accessed once my user clicks a button in my home page defined in Jade like such:

block content
    button(onclick='downloadFile()') Click me

But it seems that the function is not defined in the current scope, even though it is defined in file.js. What do I have to add in order to take my other .js files into account?

*But it seems that the function is not defined in the current scope* — You haven't shown it to be defined at all. — Quentin, Jan 31 '17 at 17:07

score 1 · Accepted Answer · edited May 23 '17 at 12:09

1

You need to load the script using a <script> element. Specify the URL to the JavaScript file using the src attribute. You will need to give the file a URL, this is probably most simply done by moving it to the static/ directory, alongside the CSS.

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

Do be aware that a program which runs on the server and a program which runs in the browser are two different programs, even if they are written in the same programming language. If file.js contains JS that is expected to run on the server and not in the browser then you will need to take another approach. This question addresses the issues in passing values between server and client.

Also note that onclick and other intrinsic event attributes have nasty gotchas, are generally considered less than best practice, and should generally be replaced by binding handlers with JS.

edited May 23 '17 at 12:09

Community

1
1

answered Jan 31 '17 at 17:10

Quentin

914,110
126
1,211
1,335

Thank you very much, I do understand the distinction between client-side JS and server-side JS. But I believe my problem is related to the inclusion of another JS file in my project. If I have a function with a simple alert in `file.js` and if I call said function in `server.js`, the function is not defined. When I include `file.js` in the html page that requires it, the file is not found. – Christopher Jan 31 '17 at 17:17
Since `alert` is a browser specific function, then of course it is `undefined` on the server. – Quentin Jan 31 '17 at 17:23
If you are getting a `404 Not Found` then you need to do what I said in the first paragraph of this answer and give it a URL. – Quentin Jan 31 '17 at 17:23
Of course, I do include my js file like such in `homepage.jade`: `script(src="file.js")` which is an equivalent to what you have proposed. Is this not the right way of doing it? – Christopher Jan 31 '17 at 17:25
@Christopher — You've told the browser what URL to use, but you haven't configured the server so that that URL works. I refer you again to the first paragraph of this answer. The third sentence of it in particular. – Quentin Jan 31 '17 at 17:27
You were right, I moved my script to the static folder and it now works. Your answer was very clear, thank you. – Christopher Jan 31 '17 at 17:28

Function defined in another .js file not found in NodeJS

1 Answers1