1

I have a function defined inside in HTML which is of module type.I need to call that function from another js file included in that same HTML file. When I call a function from a js file, it is referred to as reference error.

This is what I have in my HTML file :


<script src="../src/viewer.js"></script>
<script type="module" src="../pravintest/player.js"></script>

In viewer.js file I have a code where I call a function crossdatacheck(param) which is in player.js.

This is my player.js file: 

 import * as THREE from './threejs/build/three.module.js';
        import { GUI } from './threejs/examples/jsm/libs/dat.gui.module.js';
        import { OrbitControls } from './threejs/examples/jsm/controls/OrbitControls.js';
        import { NRRDLoader } from './threejs/examples/jsm/loaders/NRRDLoader.js';
        import { VolumeRenderShader1 } from './threejs/examples/jsm/shaders/VolumeShader.js';
        import { WEBGL } from './threejs/examples/jsm/WebGL.js';


        var renderer,
            scene,
            camera,
            controls,
            material,
            volconfig,
            cmtextures;

         function crossdatacheck(data) {
        console.log(data);
         }

I want to call this function from the viewer.js file.

When I call a function from viewer.js there is an error -> reference error: crossdatacheck function is not defined in viewer.js Can anyone suggests to me how can I do this?

gman
  • 100,619
  • 31
  • 269
  • 393
Pravin Poudel
  • 1,433
  • 3
  • 16
  • 38
  • Import the `player.js` file before the `viewer.js` file – Ryan Wilson May 20 '20 at 12:27
  • Does this answer your question? [Calling a javascript function in another js file](https://stackoverflow.com/questions/25962958/calling-a-javascript-function-in-another-js-file) – rishichawda May 20 '20 at 12:31
  • Are you using `type="module"`? You must `export` functions from a module. – Bergi May 20 '20 at 12:33
  • @rishichawda, No it does not !!!! – Pravin Poudel May 20 '20 at 12:37
  • The thread does have a working answer. This one precisely: https://stackoverflow.com/a/58152287/11104618 – rishichawda May 20 '20 at 12:42
  • I have one question, I can import function in viewer.js only if I make – Pravin Poudel May 20 '20 at 12:51

1 Answers1

3

Modules have their own scope and top level var statements and function declarations do not create globals. (This is good, globals are problematic).

To deal with this:

  1. export the variables you want to use outside the module
  2. Change the <script> that loads viewer.js so it loads it as a module
  3. Remove the <script> that loads player.js
  4. Import the variables from player.js that you want to use with an import statement inside viewer.js
Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • This is a pre-existing project, there are other files that calls the function in this file. If I change this to the module, other files also have to import what they are calling right? – Pravin Poudel May 20 '20 at 12:55
  • I have a function setdataset() in viewer.js which i am using as a event handler in HTML element This is throwing error that setData is not defined. – Pravin Poudel May 20 '20 at 13:40
  • Same problem. It isn't a global. Bind event handlers with `addEventListener`, not HTML. – Quentin May 20 '20 at 13:43