javascript - Blockly上的“Uncaught TypeError:无法设置属性…”

我开始在Blockly上进行编码，但是在尝试创建新块时遇到问题。我执行的步骤：

下载Blockly应用程序code。
我将所有文件放在一个名为Blockly的文件夹中。
我在该文件夹中创建了一个新的html文件，以查看工具箱是否工作正常。
我用Block Factory创建了两个新块。
我尝试使用新的customBlocks.js文件将这些新块添加到工具箱中。

当我尝试执行第四步时会出现问题，因为我添加了两个新块，但是它仅在工具箱中显示，我在js上显示的是第一个，但从不显示第二个，这与块的顺序无关，只有第二个永远不会正确显示。

这是我的html文件：

<!DOCTYPE html>
<html>
    <head>
        <script src="blockly_compressed.js"></script>
        <script src="blocks_compressed.js"></script>
        <script src="customBlocks.js"></script>
        <script src="msg/js/en.js"></script>
    </head>
    <body>
        <h1>This is a prove </h1>
        <div id = "blocklyMove" style = "height: 100px; width: 100px; background-color: red;"></div>
        <div id="blocklyDiv" style="height: 480px; width: 600px;"></div>

        <xml id="toolbox" style="display: none">
          <block type="controls_if"></block>
          <block type="controls_repeat_ext"></block>
          <block type="logic_compare"></block>
          <block type="math_number"></block>
          <block type="math_arithmetic"></block>
          <block type="text"></block>
          <block type="text_print"></block>
          <block type="move_right"></block>
          <block type="blockObject"></block>
        </xml>

        <script>
          var workspace = Blockly.inject('blocklyDiv',
              {toolbox: document.getElementById('toolbox')});
        </script>
    </body>
</html>

这是我的customBlocks.js文件：

'use strict';

/* *********************** MOVES TO RIGHT *********************** */

Blockly.Blocks['move_right'] = {
  init: function() {
    this.appendValueInput("PIXELS")
        .setCheck("Number")
        .appendField("move to right");
    this.setInputsInline(true);
    this.setOutput(true, null);
    this.setColour(120);
    this.setTooltip('');
    this.setHelpUrl('http://www.example.com/');
  }
};

Blockly.JavaScript['move_right'] = function(block) {
  var value_pixels = Blockly.JavaScript.valueToCode(block, 'PIXELS', Blockly.JavaScript.ORDER_ATOMIC);
  // TODO: Assemble JavaScript into code variable.
  var code = "$(document).ready(function(){ " +
                "$(\"blocklyMove\").animate({ " +
                    "right: " + value_pixels + "px" +
                "});" +
            "});";
  // TODO: Change ORDER_NONE to the correct strength.
  return [code, Blockly.JavaScript.ORDER_NONE];
};

/* *********************** BLOCK *********************** */

Blockly.Blocks['blockObject'] = {
  init: function() {
    this.appendValueInput("MOVEMENT")
        .setCheck(null)
        .appendField("Block");
    this.setColour(20);
    this.setTooltip('');
    this.setHelpUrl('http://www.example.com/');
  }
};

Blockly.JavaScript['blockObject'] = function(block) {
  var value_movement = Blockly.JavaScript.valueToCode(block, 'MOVEMENT', Blockly.JavaScript.ORDER_ATOMIC);
  // TODO: Assemble JavaScript into code variable.
  var code = '...;\n';
  return code;
};

我可以看到它在Google Chrome控制台上给了我以下错误：

未捕获的TypeError：无法设置未定义的属性'move_right'

我被困在这里，无法弄清楚问题出在哪里。任何帮助，将不胜感激。

附注：不要专注于块的逻辑，因为我还没有完成它们，但是我希望看到两个块在完成逻辑之前都能正确显示。

提前致谢！

最佳答案

最后，我找到了解决方案。在html文件上，我必须添加以下<script>标记以引用在其中定义了js的另一个Blockly.JavaScript文件（javascript_compressed.js）：

<script src="javascript_compressed.js"></script>