Как можно исправить «Uncaught ReferenceError: canv не определен в otherfile.js: 3», когда canv импортируется из main.js - PullRequest
Новая
       55

Как можно исправить «Uncaught ReferenceError: canv не определен в otherfile.js: 3», когда canv импортируется из main.js

0 голосов
/ 30 декабря 2018

Я экспортирую объект элемента canvas из моего файла main.js в отдельный файл, который я хотел бы обработать события объекта canvas.Я импортировал его раньше, когда на него ссылались в функции другого файла, однако всякий раз, когда я пытаюсь получить доступ к таким событиям, как «onmouseup» объекта canvas, он выдает вышеуказанную ошибку в первой строке, в которой он реализован.Ссылка работает, когда она находится в функции, а не когда она находится вне функции.этот другой файл предназначен для импорта в main.js.

Я предполагал, что проблема заключалась в том, что я импортировал другой файл в main.js до того, как определил, что canv было в main.js, поэтому я определил canv до импортадругой файл.

как этот 

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

Это все еще приводило к той же ошибке, поэтому я полностью озадачен.

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>

строка 3 файла otherfile.js выдает ошибку.однако ошибка не возникает, если изменить размер в другом файле или вызвать resize в main.js

Я ожидаю, что другой файл сможет ссылаться на canv и его события.однако canv, по-видимому, не определено в этом случае.

1 Ответ

0 голосов
/ 30 декабря 2018

Вместо того, чтобы пытаться экспортировать canv и повторно импортировать его, просто установите window.canv.

main.js: 

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

Это позволяет otherfile.js использовать canv как переменная.По желанию вы можете использовать const canv = window.canv.

...