how to change the background color of the circle using checkbox field?

[Vihang Kale]

I am trying to change the background color of the circle using check box field but it's not showing me the result.

//html code

<block type = "checkbox_field">

      <field name = "html"></field> 

      <field name = "css"></field>

      <field name = "javascript"></field>      

    </block>

<div id="circle"></div>

//css code

#circle {

    background-color: red;

    border:2px solid black;

    border-radius: 50%;

    width: 300px;

    height: 300px;

    position:absolute;

    left:760px;

    top:110px;  

}

//block definition

Blockly.Blocks['checkbox_field'] = {

  init: function() {

        

    this.appendValueInput("html")

        .setCheck("String")

        .appendField("html")

        .appendField(new Blockly.FieldCheckbox("TRUE"), "html");

    this.appendValueInput("css")

        .setCheck("String")

        .appendField("css")

        .appendField(new Blockly.FieldCheckbox("FALSE"), "css");

    this.appendValueInput("javascript")

        .setCheck("String")

        .appendField("blue")

        .appendField(new Blockly.FieldCheckbox("TRUE"), "javascript");

    this.setColour(0);

 this.setTooltip("checkbox");

 this.setHelpUrl("");

  },

 };

//generator snub

Blockly.JavaScript['checkbox_field'] = function(block) {

  var checkbox_html = block.getFieldValue('html') == 'TRUE';

  var value_html = Blockly.JavaScript.valueToCode(block, 'html', Blockly.JavaScript.ORDER_ATOMIC);

  var checkbox_css = block.getFieldValue('css') == 'TRUE';

  var value_css = Blockly.JavaScript.valueToCode(block, 'css', Blockly.JavaScript.ORDER_ATOMIC);

  var checkbox_javascript = block.getFieldValue('javascript');

  var value_javascript = Blockly.JavaScript.valueToCode(block, 'javascript', Blockly.JavaScript.ORDER_ATOMIC);

  if(checkbox_javascript == "TRUE") {

  var code = "document.getElementById('circle').style.backgroundColor='blue';"

}

  return code;

};

[Beka Westberg]

Hello,

Have you checked the browser console for errors? It looks like your generator is referencing an undefined `code` variable in the case where your javascript checkbox isn't checked. The following should be a fixed version, but I haven't tested it so be warned!

```

Blockly.JavaScript['checkbox_field'] = function(block) {

  // This line added

  var code = '';

  var checkbox_html = block.getFieldValue('html') == 'TRUE';
  var value_html = Blockly.JavaScript.valueToCode(block, 'html', Blockly.JavaScript.ORDER_ATOMIC);
  var checkbox_css = block.getFieldValue('css') == 'TRUE';
  var value_css = Blockly.JavaScript.valueToCode(block, 'css', Blockly.JavaScript.ORDER_ATOMIC);
  var checkbox_javascript = block.getFieldValue('javascript');
  var value_javascript = Blockly.JavaScript.valueToCode(block, 'javascript', Blockly.JavaScript.ORDER_ATOMIC);
  if(checkbox_javascript == "TRUE") {
    var code = "document.getElementById('circle').style.backgroundColor='blue';"
  }
  return code;
};

```

You'll also need to make sure you're actually running the code, not just generating it. For example:

```

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

eval(code);

```

I hope that helps! If you have any further questions please reply!

--Beka

--
You received this message because you are subscribed to the Google Groups "Blockly" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blockly+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/78d15632-e43b-40fa-8d21-db54177c06e2n%40googlegroups.com.

[Vihang Kale]

Thank you so much Beka, It worked for me!