Search code examples
javascriptjqueryblockly

"Uncaught TypeError: Cannot set property..." on Blockly

I am starting coding on Blockly but I have a problem when I try to create new blocks. The steps I made:

  • Download the Blockly application code.
  • I put all the files in a folder named Blockly.
  • I created a new html file in that folder to see if the toolbox worked fine.
  • I created two new blocks with Block Factory.
  • I tried to add these new blocks to the toolbox with a new customBlocks.js file.

The problem comes when I try to make the fourth step because I have added two new blocks but it is only displayed on the toolbox the first one I have on the js, but never the second one, it does not matter the order of the blocks, just the second one never will be displayed correctly.

Here is my html file:

<!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>

Here is my customBlocks.js file:

'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;
};

I could see that it gives to me the following error on the console of Google Chrome:

Uncaught TypeError: Cannot set property 'move_right' of undefined

I am stuck here and I cannot figure out what the problem is. Any help would be appreciated.

P.S: Do not focus on the logic of the blocks because I did not finish them yet, but I wanted to see that both blocks will be displayed correctly before finish the logic.

Thanks in advance!

Solution

  • Finally, I found the solution. On the html file I had to add the following <script> tag to make reference to another js file (javascript_compressed.js) in which Blockly.JavaScript it is defined:

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