Why this code do not work

292 views
Skip to first unread message

Faraz Firoz

unread,
Sep 4, 2021, 10:08:29 AM9/4/21
to Blockly
Hello, everyone I am new here. I want to ask why this code do not work
run.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Blocks To Code</title>
</head>
<body>  
    <main>
        <div class="blockly-editor">
            <div id="blocklyDiv" style="height: 640px; width: 1520px; margin-left: 7px; margin-top: 5px"></div>
            <xml id="toolbox" style="display: none">
              <category name="Control" colour="20">
              <block type="if_then"></block>
              <block type="if_then_else"></block>
              <block type="for_each_number"></block>
              <block type="for_each_item"></block>
              <block type="alert"></block>
            </category>
            </xml>
      </main>

      <script src="main.js"></script>
      <script src="blockly_compressed.js"></script>
      <script src="javascript_compressed.js"></script>
      <script src="https://unpkg.com/blockly"></script>
      <script src="main.js"></script>
      <script src="blockly_compressed.js"></script>
      <script src="javascript_compressed.js"></script>

      <button onclick='run()'>Run</button>
</body>
</html> 

main.js
Blockly.inject('blocklyDiv', {
  toolbox: document.getElementById('toolbox'),
  scrollbars: false
});

function run() {
  Blockly.JavaScript.addReservedWords('code');
  var code = Blockly.JavaScript.workspaceToCode(workspace);
  try {
    eval(code);
  } catch (e) {
    alert(e);
  }
}

Blockly.Blocks['if_then'] = {
  init: function() {
    this.appendValueInput("if")
        .setCheck(null)
        .appendField("if");
    this.appendStatementInput("then")
        .setCheck(null)
        .appendField("then");
    this.setInputsInline(false);
    this.setPreviousStatement(true, null);
    this.setNextStatement(true, null);
    this.setColour(20);
 this.setTooltip("");
 this.setHelpUrl("");
  }
};

Blockly.Blocks['if_then_else'] = {
  init: function() {
    this.appendValueInput("if")
        .setCheck(null)
        .appendField("if");
    this.appendStatementInput("then")
        .setCheck(null)
        .appendField("then");
    this.appendStatementInput("else")
        .setCheck(null)
        .appendField("else");
    this.setInputsInline(false);
    this.setPreviousStatement(true, null);
    this.setNextStatement(true, null);
    this.setColour(20);
 this.setTooltip("");
 this.setHelpUrl("");
  }
};

Blockly.Blocks['for_each_number'] = {
  init: function() {
    this.appendValueInput("for")
        .setCheck(null)
        .appendField("for each")
        .appendField(new Blockly.FieldTextInput("number"), "name")
        .appendField("from");
    this.appendValueInput("to")
        .setCheck(null)
        .setAlign(Blockly.ALIGN_RIGHT)
        .appendField("to");
    this.appendValueInput("by")
        .setCheck(null)
        .setAlign(Blockly.ALIGN_RIGHT)
        .appendField("by");
    this.appendStatementInput("NAME")
        .setCheck(null)
        .appendField("do");
    this.setInputsInline(false);
    this.setPreviousStatement(true, null);
    this.setNextStatement(true, null);
    this.setColour(20);
 this.setTooltip("");
 this.setHelpUrl("");
  }
};

Blockly.Blocks['for_each_item'] = {
  init: function() {
    this.appendValueInput("for")
        .setCheck(null)
        .appendField("for each")
        .appendField(new Blockly.FieldTextInput("item"), "name")
        .appendField("in list");
    this.appendStatementInput("NAME")
        .setCheck(null)
        .appendField("do");
    this.setInputsInline(false);
    this.setPreviousStatement(true, null);
    this.setNextStatement(true, null);
    this.setColour(20);
 this.setTooltip("");
 this.setHelpUrl("");
  }
};

Blockly.Blocks['alert'] = {
  init: function() {
    this.appendDummyInput()
        .appendField("alert")
        .appendField(new Blockly.FieldTextInput("text"), "text");
    this.setInputsInline(false);
    this.setPreviousStatement(true, null);
    this.setNextStatement(true, null);
    this.setColour(20);
 this.setTooltip("");
 this.setHelpUrl("");
  }
};

Blockly.JavaScript['alert'] = function(block) {
  var text_text = block.getFieldValue('text');
  var code = 'window.alert(Hii)';
  return code;
};

These all are my code but when I click on run button nothing happen also I drag the alert block in the white field

Faraz Firoz

unread,
Sep 4, 2021, 10:14:30 AM9/4/21
to Blockly
There is one error that I found in var code = 'window.alert(Hii)';
that Is I do not add "" before and after Hii but I also correct this but still nothing happen

Jason Schanker

unread,
Sep 4, 2021, 8:05:50 PM9/4/21
to Blockly
Hi,

There are two issues in addition to the one you mentioned.  First, you are including main.js before you import the script that defines Blockly so Blockly will be undefined.  All you should need for your current setup (assuming main.js is in the same directory as your HTML file) is the following (in this order):

<script src="https://unpkg.com/blockly"></script>
<script src="./main.js"></script>

Next, workspace is an undefined variable.  Try replacing workspace with Blockly.getMainWorkspace(), and this should correct the problem.  In general, if you aren't already doing so, it may help to check the Developer console, which can provide you more information about the errors you may encounter.

Best,
Jason

Faraz Firoz

unread,
Sep 5, 2021, 12:47:45 AM9/5/21
to Blockly
Am I need to do like this
var workspace =  Blockly.getMainWorkspace()

Faraz Firoz

unread,
Sep 5, 2021, 12:53:22 AM9/5/21
to Blockly
Thank you very much sir this is working

Jason Schanker

unread,
Sep 5, 2021, 1:01:41 AM9/5/21
to Blockly
Happy to help.  And if you're going to refer to the workspace again, you'd definitely want to set a variable to refer to it as you did.  Alternatively, you could also have written the following:

var code = Blockly.JavaScript.workspaceToCode(Blockly.getMainWorkspace());

Faraz Firoz

unread,
Sep 5, 2021, 1:02:13 AM9/5/21
to Blockly
Hello @jason I am trying like this tell me what is error in this
Blockly.JavaScript['alert'] = function(block) {
  var text_text = block.getFieldValue('text');
  // TODO: Assemble JavaScript into code variable.
  var code = 'window.alert(text_text);';
  return code;
};

Jason Schanker

unread,
Sep 5, 2021, 1:16:08 AM9/5/21
to Blockly
text_text will be set to the field value, which by default will be text.  So code will be assigned the following:

window.alert(text);

But then text will be treated as a variable when you evaluate this code.  Since text has not been declared, you'll get an error.  Instead you'd want to assign code to be the following:

'window.alert(\'' + text_text + '\');'

So the generated code would treat it as a string literal:

window.alert('text');

Faraz Firoz

unread,
Sep 5, 2021, 8:28:01 AM9/5/21
to Blockly
window.alert('text') do not work so I use 
Blockly.JavaScript['alert'] = function(block) {
  var text_text = block.getFieldValue('text');
  var code = 'window.alert(\"' + text_text + '\");';
  return code;
};

and this work but I have one another block whose name is if then 
Blockly.JavaScript['if_then'] = function(block) {
  var value_if = Blockly.JavaScript.valueToCode(block, 'if', Blockly.JavaScript.ORDER_ATOMIC);
  var statements_then = Blockly.JavaScript.statementToCode(block, 'then');
  var code = 'if(\"' + value_if + '\") {\"' + statements_then + '\"}';
  return code;
};

I think you know about if then block so we do not use " or ' in if then block so how I do this without any ' or "

Jason Schanker

unread,
Sep 5, 2021, 12:36:13 PM9/5/21
to Blockly
Yes, if you assign code to 'window.alert(\'' + text_text + '\');' and then drag in an alert block without changing its field value,  window.alert('text'); will be the code that is run.  

In general, it may help to add the following in your run function after the line where you assign code:

alert(code);

This way you'll be able to see the code generated from the entire workspace before it's run.  Also, for readability, you'll probably want to include a new line at the end for your alert generator so you'd use:

var code = ' window.alert(\'' + text_text + '\');\n';

For your question about the if then block, you do NOT want to use quotation marks here because valueToCode produces the string of code you want to evaluate as is.  So you could assign it to:

var code = 'if(' + value_if + ') {\n' + Blockly.JavaScript.prefixLines(statements_then, Blockly.JavaScript.INDENT) + '}';

Also, if you don't include a block for the condition, then value_if will be the empty string and it'll wind up generating the code if() { ... }, which will lead to a syntax error.  As such you'll want a default value.  You can have a default value of false as follows:

var value_if = Blockly.JavaScript.valueToCode(block, 'if', Blockly.JavaScript.ORDER_NONE) || 'false';

One final note is that you'll want to change ATOMIC to NONE here to indicate that the input will never need additional parentheses added around it.  You can learn more about operator precedence in Blockly from https://developers.google.com/blockly/guides/create-custom-blocks/operator-precedence and https://www.youtube.com/watch?v=_DnPutgYKdc.
Reply all
Reply to author
Forward
0 new messages