How to instanciate an object from another file to another file - javascript

Question

I'm new to javascript, I've got some issues.

I want to create an instance of the object Obstacle inside the js5.js file, but I keep getting this error message:

Uncaught ReferenceError: Obstacle is not defined at window.onload

Here's what I've done, I shouldn't modify the file where the Obstacle is created, I have to work on the js5.js file.

js5.js file:

window.onload = function(){ 
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var posX = 30;
var posY = 375;
var posyInit = 375;
var theta = 0;
var pas = 0; 
var ligne = 2; 
var droite = true;
var compteur = 0;
var o1 = new Obstacle(0,0,27,27); 
var o2 = new Obstacle(184,84,134,67);
var toto = new Array(o1,o2);

obstacle.js:

function Obstacle (p_x,p_y,p_largeur,p_hauteur) {

this.x = p_x;
this.y = p_y;
this.largeur = p_largeur;
this.hauteur = p_hauteur;

Obstacle.prototype.notAllowed = function(a,b){
    if (a>=this.x&&a<=this.x+this.largeur&&b>=this.y&&b<=this.y+this.hauteur)
        return true;
    else    
        return false;
};

Thanks for your help :)

Take a look at this: https://stackoverflow.com/questions/950087/how-do-i-include-a-javascript-file-in-another-javascript-file — Jeremy Harris, Dec 31 '19 at 13:20
You must modify the *obstacle.js* file to make it work, as currently it has a syntax error. — Bergi, Dec 31 '19 at 13:21
This is completely OT but may I recommend using English variable/function names? People will be much more willing to help you with code problems :) — , Dec 31 '19 at 13:56
Thank you @JeremyHarris but I shouldn't add anything in the Obstacle file, it's an assignement, the teacher gave the _obstacle.js_ file so he doesn't want us to modify it — Lei, Jan 02 '20 at 09:14

score 0 · Answer 1 · answered Dec 31 '19 at 13:32

0

export Obstacle function from Obstacle.js at the end , export {Obstacle} . then import it inside js5.js at top, import {Obstacle} from "./Obstacle"

p.s : import assumes both files in same folder. otherwise use appropriate relative path.

answered Dec 31 '19 at 13:32

Ayyappa Gollu

906
7
16

what is wrong with the answer , it's es6 module pattern right ? whats up with downvote – Ayyappa Gollu Dec 31 '19 at 15:21
Thank you @Ayyappa Gollu but I've got restrictions to not touch or change the _obstacle.js_ file – Lei Jan 02 '20 at 09:18

Jignesh Raval · Accepted Answer · 2019-12-31T14:00:03.903

I tried to test the code provided by you. Only the closing curly brackets ware missing in both the files and/or code snippets. Please check below given code and let me know if I have missed anything. Currently not able to replicate the uncaught reference error.

window.onload = function(){ 
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');

  var posX = 30;
  var posY = 375;
  var posyInit = 375;
  var theta = 0;
  var pas = 0; 
  var ligne = 2; 
  var droite = true;
  var compteur = 0;
  var o1 = new Obstacle(0,0,27,27); 
  var o2 = new Obstacle(184,84,134,67);
  var toto = new Array(o1,o2);
}

// obstacle.js:
// ==========================
function Obstacle (p_x,p_y,p_largeur,p_hauteur) {
  this.x = p_x;
  this.y = p_y;
  this.largeur = p_largeur;
  this.hauteur = p_hauteur;
}

Obstacle.prototype.notAllowed = function(a,b){
    if (a>=this.x&&a<=this.x+this.largeur&&b>=this.y&&b<=this.y+this.hauteur)
        return true;
    else    
        return false;
};

<canvas id="canvas"></canvas>

I assume that in your index.html file you are importing both the .js files.

<html>
<head>
  <script src="./obstacle.js></script>
  <script src="./js5.js></script>
</head>
</html>

I hope this will be helpful.

Thanks, Jignesh Raval

Thank you @Jignesh, I forgot to include the _obstacle.js_ inside my html, but it still doesn't work, may be I'll provide the whole code so you can tell me what's wrong? — Lei, Jan 02 '20 at 09:16
I included the _obstacle.js_ in the html file but instead of `` I wrote `` that's why it doesn't work, so now it works, thank you so much :) — Lei, Jan 03 '20 at 16:23

How to instanciate an object from another file to another file - javascript

2 Answers2