I am on a steep learning curve learning code to create a website implementing Blockly → https://developers.google.com/blockly/. A good example of a Blockly end result → https://blockly.games/maze?lang=en
All comments in this post relate to two zipped files located at my website https://temp.foxping.com/ → Blockly XML.7z and Blockly JSON.7z.
Those two files are different from each other. But they are relevant to the questions.
==========
In Blockly XML.7z → HTML file
<body mode="maker">
...
<main>
...
<button class="mode-maker mdl-button" id="edit">Edit</button>
...
<div class="maker">
<div>
<div class="button mdl-color--amber-500">1</div>
<div class="button mdl-color--yellow-500">2</div>
<div class="button mdl-color--lime-500">3</div>
</div>
...
</div>
...
</main>
...
</body>
In Blockly XML.7z → main.js file
document.querySelector('#edit').addEventListener('click', enableEditMode);
...
function enableEditMode() {
document.body.setAttribute('mode', 'edit');
document.querySelectorAll('.button').forEach(btn => {
btn.removeEventListener('click', handlePlay);
btn.addEventListener('click', enableBlocklyMode);
});
}
The Blockly XML.7z code is using XML.
==========
In Blockly JSON.7z → HTML file
<body>
<div id="blocklyDiv"></div>
<script>
var toolbox =
{
"kind": "categoryToolbox",
"contents": [
{
"kind": "category",
"name": "Core",
"contents": [
{
"kind": "block",
"type": "controls_if"
},
{
"kind": "block",
"type": "logic_compare"
},
]
},
...
</script>
</body>
The Blockly JSON.7z code is using JSON.
What do I change in the Blockly JSON.7z code to implement “querySelector” and “setAttribute”?
