1

I am exporting a canvas element object from my main.js file to a separate file that I would like to handle the events of the canvas object. I have imported it before when it would be referenced in a function of the other file, however whenever I try to access the events such as "onmouseup" of the canvas object it gives the above error on the first line that it is implemented. Referencing does work when it is in a function just not when it is outside of a function. this other file is meant to be imported into main.js.

I assumed the problem was that I was importing other file in main.js before I defined what canv was in main.js so I defined canv before imported the other file.

like this 

export const canv = document.getElementById('window');
import {resize} from "/scripts/otherfile.js";
resize(10,80);

This still gave to same error so I am thoroughly stumped.

main.js

import {resize} from "/scripts/otherfile.js";
export const canv = document.getElementById('window');
resize(10,80);

otherfile.js

import {canv} from "../main.js";
let focus  = false;
canv.onmouseenter = () => focus = true;
export const resize =  (x, y) =>{
        canv.height = y;
        canv.width = x;
}

HTML

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8" />
        <title>Graphing Calculator</title>
</head>
<body>
        <canvas id="window" style="border:dotted"></canvas>
        <script type="module" src="main.js"></script>
</body>
</html>

line 3 of otherfile.js throws the error. however no error occurs by having resize in the other file or calling resize in main.js

I expect for the other file to be able to reference canv and its events. however canv is apparently not defined in that case.

Patrick Roberts
  • 49,224
  • 10
  • 102
  • 153
robert gibson
  • 111
  • 1
  • 4
  • Can you include how these look in your HTML as ` – Patrick Roberts Dec 29 '18 at 23:16
  • @Patrick I am sorry but I do not understand what you mean by this. Are you asking for me to put this code into a script tag? and if so why. Also I would like to keep my code modular which is why they are in multiple files. – robert gibson Dec 29 '18 at 23:18
  • I'm not asking you to inline these scripts, I'm asking you to create a [mcve]. Right now you have your source, which is clearly using ES6 [`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) / [`export`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export) syntax client-side, but in order to execute these modules, at least one of them has to be included via an HTML ` – Patrick Roberts Dec 29 '18 at 23:20
  • Oh sorry that's is what you are asking. I am dumb sorry. – robert gibson Dec 29 '18 at 23:27
  • @Patrick I have made the addition. – robert gibson Dec 29 '18 at 23:29
  • You can't query an element that hasn't been parsed yet. The ` – Patrick Roberts Dec 29 '18 at 23:29
  • @Patrick I have does this yet the issue still stands. – robert gibson Dec 29 '18 at 23:31
  • If you replace `import {canv} from "../main.js";` with `const canv = document.getElementById('window');` it solves the issue. Can you not do that? – Patrick Roberts Dec 29 '18 at 23:47
  • @Patrick well in that case that would require that I link otherfile.js to my html document which isn't desire but I don't mind if it has to be done. I would really want to reference the canvas from the main script. If that can't be done I would like to know the reason why? – robert gibson Dec 29 '18 at 23:51
  • It's because the circular dependency can't be resolved until the top-level scope of the module has fully executed. – Patrick Roberts Dec 29 '18 at 23:52
  • Okay so I have created a circular dependency! But may I ask this because this continues to make sense in my head. If I were to define canv before I import other file then when otherfile gets imported and it has to import canv from main.js canv will already exist meaning it will then reference that. – robert gibson Dec 30 '18 at 00:01
  • and @Patrick sorry for so many questions but why then are functions able to be called from the otherfile.js if I created a circular dependency I thought those were supposed to brake javascript? – robert gibson Dec 30 '18 at 00:02
  • function scope is not the same as top scope. – Patrick Roberts Dec 30 '18 at 00:02

1 Answers1

0

Rather than try to export canv and re-import it, just set window.canv.

main.js:

window.canv = document.getElementById('window');
// other code

This allows otherfile.js to use canv as a variable. Optionally you can use const canv = window.canv.

Potassium Ion
  • 2,075
  • 1
  • 22
  • 39