Question

因此，我的处理文件中有一个switch语句，该语句更改了一个名为'zooText'的变量。 zooText在名为text.js的JavaScript文件中声明。但是，由于某种原因，Processing无法访问或更改该变量。

zooText的预期行为将更改为switch语句中设置的任何行为。但是，<p>仅表示“未定义”。

这是switch语句：

 switch(sceneNum){
            case 1:
              zooText = "Welcome to the office. This is where we organize all our files. Important files include our certification by the AZA (Association of Zoos & Aquariums), and other"
                    + " important documents which certify we keep our animals healthy and happy";
                    break;
            case 2:
                    zooText = "This is the education area. Here we teach children about the importance of conservation, and protecting our planet. According to some people,"  
         + "we're really influential!";
                    break;
            case 3:
                    zooText = "Scene 3";
                    break;
            case 4:
                    display = "This is the Aquatic Area. Although most of these animals have natural roaming areas of hundreds of miles, we like to keep them in small enclosures";
                    break;

这是相关的JavaScript：

var zooText;

function changeText(){ 
        document.getElementById("demo").innerHTML = zooText;
}
setTimeout(changeText, 100);

最后，相关的HTML：

<head>
              <title>Zoo Ethics</title>

              <link rel='stylesheet' href='style.css' type='text/css'>
           <script src="processing.js" width="1000" height="800"></script>
           <script src='text.js'></script>
      </head>

      <body style="background-color:#e0eaf9">
              <h1>Explore the Zoo!</h1>

              <p id="demo"></p>
             <canvas id="sketch" data-processing-sources="zoos.pde"></canvas>
          <script src='text.js'></script>

我已经为此努力了几个小时。我将问题缩小到可能在JavaScript之前未加载草图或类似的方式。

Answer 1

尝试先导入text.js文件，然后再导入processing.js

<script src='text.js'></script>
<script src="processing.js" width="1000" height="800"></script>

Answer 2

我仅通过在.pde文件中包含纯JavaScript就能找到解决方法。我创建了一个名为zooText的变量，完全删除了text.js文件，然后简单地使.pde文件更新了draw（）函数中的<p>。

Answer 3

这确实取决于您如何调用脚本。如果它只是Processing.js中的基本代码，那么它将在加载时立即运行，甚至在DOM和所有其他脚本加载之前。一种选择是按规定的顺序反转它们的加载顺序。但是，由于各种原因（例如服务器延迟），这仍然可能会产生相同的问题。如果这是它的运行方式，那么您可能会考虑将基本/原始命令放在init()函数中。然后让事件在文档上运行：内部processing.js：

function init(){
    //call processing.js functions/commands here
}
//remaining processing.js function definitions here
if (document.readyState !== 'loading') {
  init()
} else {
  // the document hasn't finished loading/parsing yet so let's add an event handler
  document.addEventListener('DOMContentLoaded', init)
}

以此方式执行操作将有助于确保在运行之前加载所有脚本。如果您拥有/用户使用jQuery，则可以使用$(document).ready(function(){init()});

简化最后一部分

Answer 4

  <head>
    <title>Zoo Ethics</title>

     <link rel='stylesheet' href='style.css' type='text/css'>
     <script src='text.js'></script> <---I MOVED ABOVE PROCESS.JS
     <script src="processing.js" width="1000" height="800"></script>

  </head>

  <body style="background-color:#e0eaf9">
          <h1>Explore the Zoo!</h1>
          <p id="demo"></p>
         <canvas id="sketch" data-processing-sources="zoos.pde"></canvas>
      <script src='text.js'></script> <---THIS SEEMS LIKE A DUPLICATE

Processing.js无法访问全局JavaScript变量

4 个答案: