Call JS function from another JS File

Question

I have a js function that hides an element on a page. I want to be able to call that function from a different js file. When I do a require it tells me document is not defined.

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div id="picture1">
        <img src="img.jpg" alt="img">
    </div> 

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

</body>

</html>

script.js:

function hide() {
    var x = document.getElementById("picture1");
    if (x.style.display === "none") {
      x.style.display = "block";
    } else {
      x.style.display = "none";
    }
}

Want to call hide() function in here

main.js

const webHider = require("./script")

webHider.hider()

require is not typically available inside a browser (it is usually used only in server side nodejs apps). Many functions will automatically get added to the "global" scope of the document when the file is loaded as a script tag. This means you can often find them in window.hide for example. You might also want to post your web inspector console messages which will show what the actual error is. It is not always the case that they get added, sometimes libraries restrict how the function is defined to avoid polluting the window scope. Try calling window.hide() and see if it works. — xrd
– xrd, Commented Jul 17, 2020 at 16:13

symlink · Accepted Answer · 2020-07-17 16:27:00Z

1

With node js you are using the Common JS syntax. Export the function from your script.js file.

exports.hide = () => {
    var x = document.getElementById("picture1");
    if (x.style.display === "none") {
      x.style.display = "block";
    } else {
      x.style.display = "none";
    }
}

This is assuming that you are exporting and importing on the server, i.e. with Node JS. If you are doing it on the browser you will want the ES6 AMD API and depending on your setup you may need to add a bundler like Browserify or Webpack to get things set up.

As @DarioK suggests, it might just be easier, if you are not using node js and importing/exporting server-side, to just use script tags.

If you're not familiar with importing and exporting functions/variables/objects with node js or with the ES6 syntax, there is a lot to learn and absorb, so in my opinion you're better off keeping things simple for now (i.e. script tags) and building your skills with these over time, but I recommend that you do learn them.

edited Jul 17, 2020 at 16:27

answered Jul 17, 2020 at 16:16

symlink

12.2k7 gold badges31 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Bafifi Over a year ago

I get the same error: var x = document.getElementById("picture1"); ReferenceError: document is not defined

symlink Over a year ago

@Bafifi it may be firing before window.document is defined stackoverflow.com/questions/24647839/…

Dario K · Accepted Answer · 2020-07-17 16:16:29Z

0

You must include the script (main.js) in html before the script you want to use it in(script.js).

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

And you just call it as if it were in the same file.

answered Jul 17, 2020 at 16:16

Dario K

3361 gold badge4 silver badges17 bronze badges

Comments

RoToRa · Accepted Answer · 2020-07-17 16:19:47Z

0

Several points you need to check:

You are obviously running this in a browser (and not node as you indicate in the tags) and browsers don't have require built in. Have you included a version of require such as requirejs?
When you use require, you need to "export" any functions that you are using:

function hide() { 
   // ...
}

mmodule.exports = { hide };

The function you defined is called hide but you are calling it as hider.
Have you included main.js?

answered Jul 17, 2020 at 16:19

RoToRa

38.5k12 gold badges73 silver badges110 bronze badges

Comments

SatishSharma445 · Accepted Answer · 2020-07-17 16:39:19Z

0

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

just include both the files in your html code and inside main.js call the function directly hide(); you don't need to require if you are including both the js files in the HTML file. just maintain the sequence of the files. function call should be after the function declaration.

edited Jul 17, 2020 at 16:39

answered Jul 17, 2020 at 16:33

SatishSharma445

92 bronze badges

Collectives™ on Stack Overflow

Call JS function from another JS File

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related