0

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()
Bafifi
  • 3
  • 1
  • `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 Jul 17 '20 at 16:13
  • just link your js file into your html – DCR Jul 17 '20 at 16:15

4 Answers4

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.

symlink
  • 11,984
  • 7
  • 29
  • 50
  • I get the same error: var x = document.getElementById("picture1"); ReferenceError: document is not defined – Bafifi Jul 17 '20 at 16:24
  • @Bafifi it may be firing before window.document is defined https://stackoverflow.com/questions/24647839/referenceerror-document-is-not-defined-in-plain-javascript – symlink Jul 17 '20 at 16:26
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.

Dario K
  • 306
  • 1
  • 4
  • 15
0

Several points you need to check:

  1. 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?

  2. When you use require, you need to "export" any functions that you are using:

function hide() { 
   // ...
}

mmodule.exports = { hide };

  1. The function you defined is called hide but you are calling it as hider.

  2. Have you included main.js?

RoToRa
  • 37,635
  • 12
  • 69
  • 105
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.

SatishSharma445
  • 9
  • 2