Calling a javascript function from another javascript file and getting Reference errors and Invalid state errors and some warnings inside atom IDE

Question

I am a new to javascript coding in p5 and i am getting errors when trying to call a function from another javascript file. Here is my html file:

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>p5.js example</title>
    <style> body {padding: 0; margin: 0;} </style>
    <script src="../p5.min.js"></script>
    <script src="../addons/p5.dom.min.js"></script>
    <script src="../addons/p5.sound.min.js"></script>
    <script src="sketch.js"></script>
    <script src="file.js"></script>
  </head>
  <body>
  </body>
</html>

Here is my javascript file 1:

function setup() {
  createCanvas(400,400);
}
function draw(){
  pr("hello world",x,y);
}

Here is my javascript file 2:

function pr(text,x,y){
  text(text,x,y);
}

I edited the function arguments because i forgot that text function has a different sytnax than i wrote. Still getting errors:

InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable

Use of the orientation sensor is deprecated. p5.min.js:3:232007

Use of the motion sensor is deprecated. p5.min.js:3:232007

ReferenceError: x is not defined

you are caling the pr() in draw() with variable x but draw() donot have scope of variable x — Suresh Kumar
– Suresh Kumar, Commented Mar 29, 2019 at 19:20

U Rogel · Accepted Answer · 2019-03-29 19:15:17Z

1

The files has different scope, so one isn't aware of the other. If you want a function to be accessible from another file you need to add it to a shared scope. You can put it on the window (global scope) object and then to use it elsewhere.

file1:

function there(text){
  console.log(text)
}

window.there = there

file2:

function here(){
  there("hello world");
}

here()

In your html file you should first import file1 and after that file2. That way when you call it it is already the.

NOTE: writing on the window object is not a good practice! you should probably find a tool that creates a bundle an let you access a function from another file. Check Webpack for example.

answered Mar 29, 2019 at 19:15

U Rogel

1,95117 silver badges31 bronze badges

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

Collectives™ on Stack Overflow

Calling a javascript function from another javascript file and getting Reference errors and Invalid state errors and some warnings inside atom IDE

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related