P5JS编辑器中的多个Javascript草图？_Javascript_File_Editor_Processing

P5JS编辑器中的多个Javascript草图？

javascript file editor processing

P5JS编辑器中的多个Javascript草图？,javascript,file,editor,processing,Javascript,File,Editor,Processing,我对P5JS和P5JS编辑器比较陌生。我还不熟悉堆栈溢出。我正试图通过在编辑器中打开新选项卡将代码拆分为多个草图（.js文件），如本“编码系列”视频中所述：我相信我准确地遵循了视频中的步骤。我的'index.html'文件如下所示： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Untitled</title> <s

我对P5JS和P5JS编辑器比较陌生。我还不熟悉堆栈溢出。我正试图通过在编辑器中打开新选项卡将代码拆分为多个草图（.js文件），如本“编码系列”视频中所述：

我相信我准确地遵循了视频中的步骤。我的'index.html'文件如下所示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Untitled</title>
    <script src="libraries/p5.js" type="text/javascript"></script>

    <script src="libraries/p5.dom.js" type="text/javascript"></script>
    <script src="libraries/p5.sound.js" type="text/javascript"></script>

    <script src="sketch.js" type="text/javascript"></script>
    <script src="mybutton.js" type="text/javascript"></script>
    <script src="p5.collide2d.js" type="text/javascript"></script>

    <style> body {padding: 0; margin: 0;} canvas {vertical-align: top;} </style>
  </head>
  <body>
  </body>
</html>

function setup() {
  createCanvas(windowWidth, windowHeight);
  rectMode(CENTER);
  noStroke();
}

var testButton = new MyButton(50, 50);  //This line produces the error
console.log(testButton);

function draw() {
  background(40);
  testButton.display();
}

并给它自己的名为“mybutton.js”的文件，以减少普通“sketch.js”文件的混乱。目前，“sketch.js”文件如下所示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Untitled</title>
    <script src="libraries/p5.js" type="text/javascript"></script>

    <script src="libraries/p5.dom.js" type="text/javascript"></script>
    <script src="libraries/p5.sound.js" type="text/javascript"></script>

    <script src="sketch.js" type="text/javascript"></script>
    <script src="mybutton.js" type="text/javascript"></script>
    <script src="p5.collide2d.js" type="text/javascript"></script>

    <style> body {padding: 0; margin: 0;} canvas {vertical-align: top;} </style>
  </head>
  <body>
  </body>
</html>

function setup() {
  createCanvas(windowWidth, windowHeight);
  rectMode(CENTER);
  noStroke();
}

var testButton = new MyButton(50, 50);  //This line produces the error
console.log(testButton);

function draw() {
  background(40);
  testButton.display();
}

但是，当我以这种方式运行代码时，第7行出现以下错误：

7: Uncaught TypeError: Illegal constructor

然而，如果我在“sketch.js”文件中使用“MyButton”函数运行代码（并且我没有给它自己的文件），它会正确运行，并且不会出现任何错误。我不确定是什么问题。如何让“MyButton”函数拥有自己的文件而不出现任何错误？如果有什么不同的话，我正在LinuxMint上运行P5JS。感谢您的帮助。谢谢大家!

如果从testButton之前删除

var

，则错误会减轻（如下所示）：

最初的问题是p5js需要在setup中声明变量，以便在draw循环中访问它。从全局声明中删除var使得

testButton

与全局变量非常相似（但不是完全相同），从而允许draw循环“查看”变量。有关更多详细信息，请参阅答案。

错误在哪一行？另外，您可能不想调用node.js，因为这可能会让阅读您的问题的人感到困惑。你能发布你的

index.html

文件的全部内容吗，或者最好发布一个运行此代码的小提琴或代码笔？谢谢！这就解释了为什么它在我的一些项目中起作用，而在其他项目中不起作用——我必须有时使用“var”，而不是其他时候。