Verify if there are DOM elements located within a DIV container, execute the functions associated with those elements sequentially

Question

Verify if there are DOM elements located within a DIV container, execute the functions associated with those elements sequentially

I am in the process of creating a game using HTML, CSS, and JavaScript. My focus right now is on manipulating DOM elements without relying on the canvas tag. The goal is to develop a pseudo graphical programming language, similar to the environment provided by Blockly. I have already added 3 clickable elements inside #toolbox that create duplicates in #workspace.

Now, my task is to assign functions to the elements within #workspace. When the Run button is clicked, these functions should execute in the order they appear, creating a sequence of commands to move the pink square inside #output_section.

However, I'm struggling with writing the function that can detect the presence of elements and execute the assigned functions for each element.

Any suggestions or ideas? :D

I am working with Jquery version 3.3.1

function addRed() {
    var redWorkspace = document.createElement("DIV");
    redWorkspace.className = "remove-block block red";
    document.getElementById("workspace").appendChild(redWorkspace);
};

function addBlue() {
    var blueWorkspace = document.createElement("DIV");
    blueWorkspace.className = "remove-block block blue";
    document.getElementById("workspace").appendChild(blueWorkspace);
};

function addGreen() {
    var greenWorkspace = document.createElement("DIV");
    greenWorkspace.className = "remove-block block green";
    document.getElementById("workspace").appendChild(greenWorkspace);
};

$("#clear_workspace").click(function () {
    $("#workspace").empty();
});

$(document).on("click", ".remove-block", function () {
    $(this).closest("div").remove();
});

html,
body {
    margin: 0;
    padding: 0;
}

#workspace {
    display: flex;
    height: 100px;
    padding: 10px;
    background: black;
}

#toolbox {
    display: flex;
    padding: 10px;
    width: 300px;
}

#output_section {
    height: 500px;
    width: 500px;
    border: solid black;
    margin: 10px;
    position: relative;
}

#moving_square {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100px;
    height: 100px;
    background: pink;
}

.block {
    height: 100px;
    width: 100px;
}


.red {
    background: red;
}

.blue {
    background: cyan;
}

.green {
    background: green;
}

.grey {
    background: #ccc;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
    <div id="workspace"></div>
    <div id="workspace-menu">
       <button id="run_workspace">Run</button>
        <button id="clear_workspace">Clear</button>
    </div>
    <div id="toolbox" class="grey">
    <div onclick="addRed()" class="block red">Left</div>
    <div onclick="addBlue()" class="block blue">Up</div>
    <div onclick="addGreen()" class="block green">Right</div>
    </div>
    <div id="output_section">
        <div id="moving_square"></div>
    </div>
</body>
</html>

javascript jquery html css blockly

Answer 1

Answer №1

Not tested, but when the run button is clicked, the following script might be executed:

$("#run_workspace").click(function() {
    $("#workspace .block").each(function(element) {
        if (element.hasClass("red")) {
            moveObjectLeft();
        }  else if (element.hasClass("green")) {
            moveObjectRight();
        }  else if (element.hasClass("blue")) {
            moveObjectUp();
        } 
    });
});

Answer 2

Not tested, but when the run button is clicked, the following script might be executed:

$("#run_workspace").click(function() {
    $("#workspace .block").each(function(element) {
        if (element.hasClass("red")) {
            moveObjectLeft();
        }  else if (element.hasClass("green")) {
            moveObjectRight();
        }  else if (element.hasClass("blue")) {
            moveObjectUp();
        } 
    });
});

Answer 3

Answer №2

It's often recommended to organize all necessary data in arrays and objects, utilizing HTML solely for presenting the information.

In addition, if jQuery is already implemented - it can be used for all tasks)
Here are some enhancements:

let mobs = {
  pinky: {
    node: $('#moving_square'),
    coors: { top: 400, left: 400 },
    step: 30,
    moveQueue: [],
    // moveTimeout ??? 
  },
}; // All created moving objects kept here.
/* Each [moveQueue] array will store the sequence of movements, like ["up", "up", "left"]

You can match each movement "keyword" with the corresponding function by using the 'move' object */

let move = { // Consider simplifying this object and its functions. It's doable!)
  left: function (obj) {
    let left = obj.coors.left = (obj.coors.left - obj.step);
    obj.node.css('left', left + 'px');
  },
  up: function (obj) {
    let top = obj.coors.top = (obj.coors.top - obj.step);
    obj.node.css('top', top + 'px');
  },
  right: function (obj) {
    let left = obj.coors.left = (obj.coors.left + obj.step);
    obj.node.css('left', left + 'px');
  }
};

let stepTimeout = 1000;
let running = false;
let timeouts = {}; // Store all active timeouts here, and clear them as needed

$('#toolbox .block').on('click', function () {
  let color = $(this).attr('data-color');
  let workBlock = '<div class="remove-block block ' + color + '"></div>';
  $('#workspace').append(workBlock);

  mobs.pinky.moveQueue.push( $(this).text().toLowerCase() ); // Adaptable to any other selected object
});

$('#run_workspace').on('click', function () {
  running = true;
  runCode();

  function runCode() {
    for (let obj in mobs) { // Multiple mobile objects may exist
      // Inside the loop, obj corresponds to each key name in mobs. Currently, it's "pinky"
      
      let i = 0;
      let pinky = mobs[obj];

      localRun();
      
      function localRun() {
        let direction = pinky.moveQueue[i]; // Retrieve direction key by array index
        
        move[direction](pinky); // Call the necessary function from storage

        if (pinky.moveQueue[++i] && running ) {
          // If moveQueue has the next element, self-call again while incrementing i by +1
          timeouts[obj] = setTimeout(localRun, stepTimeout);
        }
      }
    }
  }

});

$("#clear_workspace").click(function () {
  $("#workspace").empty();
});

$('#workspace').on("click", ".remove-block", function () {
  $(this).closest("div").remove();
});

html,
body {
  margin: 0;
  padding: 0;
}

#workspace {
  display: flex;
  height: 100px;
  padding: 10px;
  background: black;
}

#toolbox {
  display: flex;
  padding: 10px;
  width: 300px;
}

#output_section {
  height: 500px;
  width: 500px;
  border: solid black;
  margin: 10px;
  position: relative;
}

#moving_square {
  position: absolute;
  top: 400px;
  left: 400px;
  width: 100px;
  height: 100px;
  background: pink;
}

.block {
  height: 100px;
  width: 100px;
}

.red {
  background: red;
}

.blue {
  background: cyan;
}

.green {
  background: green;
}

.grey {
  background: #ccc;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="workspace"></div>
<div id="workspace-menu">
  <button id="run_workspace">Run</button>
  <button id="clear_workspace">Clear</button>
</div>
<div id="toolbox" class="grey">
  <div data-color="red" class="block red">Left</div>
  <div data-color="blue" class="block blue">Up</div>
  <div data-color="green" class="block green">Right</div>
</div>
<div id="output_section">
  <div id="moving_square"></div>
</div>

Although... jQuery was utilized primarily for handling clicks. Conversion to JS:

let mobs = {
  pinky: {
    node: document.getElementById('moving_square'),
    coors: { top: 400, left: 400 },
    step: 30,
    moveQueue: [],
  },
};

let move = {
  left: function (obj) {
    let left = obj.coors.left = (obj.coors.left - obj.step);
    obj.node.style.left = left + 'px';
  },
  up: function (obj) {
    let top = obj.coors.top = (obj.coors.top - obj.step);
    obj.node.style.top = top + 'px';
  },
  right: function (obj) {
    let left = obj.coors.left = (obj.coors.left + obj.step);
    obj.node.style.left = left + 'px';
  }
};

let stepTimeout = 1000;
let running = false;
let timeouts = {};

let blocks = document.querySelectorAll('#toolbox .block');
let workSpace = document.getElementById('workspace');

blocks.forEach(function(block){
  block.addEventListener('click', function(){
    let color = this.dataset.color;
    let workBlock = '<div class="remove-block block ' + color + '"></div>';
    
    workSpace.insertAdjacentHTML('beforeend', workBlock);
    
    mobs.pinky.moveQueue.push( this.textContent.toLowerCase() );
  });
});

document.getElementById('run_workspace').addEventListener('click', function () {
  running = true;
  runCode();

  function runCode() {
    for (let obj in mobs) { // Possible presence of multiple mobile objects
      // Inside the loop, obj matches each key name in mobs. Here, it corresponds to "pinky"
      
      let i = 0;
      let pinky = mobs[obj];

      localRun();
      
      function localRun() {
        let direction = pinky.moveQueue[i]; // Extract the direction key based on the array index
        
        move[direction](pinky); // Invoke the relevant function from storage

        if (pinky.moveQueue[++i] && running ) {
          // Once there's a subsequent element in moveQueue, initiate self-calling while incrementing i by +1
          timeouts[obj] = setTimeout(localRun, stepTimeout);
        }
      }
    }
  }

});

document.getElementById("clear_workspace").addEventListener('click', function () {
  workSpace.textContent = "";
});

workSpace.addEventListener('click', function (e) {
  if( e.target.classList.contains('remove-block') ){
    e.target.remove();
  }
});

html,
body {
  margin: 0;
  padding: 0;
}

#workspace {
  display: flex;
  height: 100px;
  padding: 10px;
  background: black;
}

#toolbox {
  display: flex;
  padding: 10px;
  width: 300px;
}

#output_section {
  height: 500px;
  width: 500px;
  border: solid black;
  margin: 10px;
  position: relative;
}

#moving_square {
  position: absolute;
  top: 400px;
  left: 400px;
  width: 100px;
  height: 100px;
  background: pink;
}

.block {
  height: 100px;
  width: 100px;
}

.red {
  background: red;
}

.blue {
  background: cyan;
}

.green {
  background: green;
}

grey {
  background: #ccc;
}

<div id="workspace"></div>
<div id="workspace-menu">
  <button id="run_workspace">Run</button>
  <button id="clear_workspace">Clear</button>
</div>
<div id="toolbox" class="grey">
  <div data-color="red" class="block red">Left</div>
  <div data-color="blue" class="block blue">Up</div>
  <div data-color="green" class="block green">Right</div>
</div>
<div id="output_section">
  <div id="moving_square"></div>
</div>

Answer 4

It's often recommended to organize all necessary data in arrays and objects, utilizing HTML solely for presenting the information.

In addition, if jQuery is already implemented - it can be used for all tasks)
Here are some enhancements:

let mobs = {
  pinky: {
    node: $('#moving_square'),
    coors: { top: 400, left: 400 },
    step: 30,
    moveQueue: [],
    // moveTimeout ??? 
  },
}; // All created moving objects kept here.
/* Each [moveQueue] array will store the sequence of movements, like ["up", "up", "left"]

You can match each movement "keyword" with the corresponding function by using the 'move' object */

let move = { // Consider simplifying this object and its functions. It's doable!)
  left: function (obj) {
    let left = obj.coors.left = (obj.coors.left - obj.step);
    obj.node.css('left', left + 'px');
  },
  up: function (obj) {
    let top = obj.coors.top = (obj.coors.top - obj.step);
    obj.node.css('top', top + 'px');
  },
  right: function (obj) {
    let left = obj.coors.left = (obj.coors.left + obj.step);
    obj.node.css('left', left + 'px');
  }
};

let stepTimeout = 1000;
let running = false;
let timeouts = {}; // Store all active timeouts here, and clear them as needed

$('#toolbox .block').on('click', function () {
  let color = $(this).attr('data-color');
  let workBlock = '<div class="remove-block block ' + color + '"></div>';
  $('#workspace').append(workBlock);

  mobs.pinky.moveQueue.push( $(this).text().toLowerCase() ); // Adaptable to any other selected object
});

$('#run_workspace').on('click', function () {
  running = true;
  runCode();

  function runCode() {
    for (let obj in mobs) { // Multiple mobile objects may exist
      // Inside the loop, obj corresponds to each key name in mobs. Currently, it's "pinky"
      
      let i = 0;
      let pinky = mobs[obj];

      localRun();
      
      function localRun() {
        let direction = pinky.moveQueue[i]; // Retrieve direction key by array index
        
        move[direction](pinky); // Call the necessary function from storage

        if (pinky.moveQueue[++i] && running ) {
          // If moveQueue has the next element, self-call again while incrementing i by +1
          timeouts[obj] = setTimeout(localRun, stepTimeout);
        }
      }
    }
  }

});

$("#clear_workspace").click(function () {
  $("#workspace").empty();
});

$('#workspace').on("click", ".remove-block", function () {
  $(this).closest("div").remove();
});

html,
body {
  margin: 0;
  padding: 0;
}

#workspace {
  display: flex;
  height: 100px;
  padding: 10px;
  background: black;
}

#toolbox {
  display: flex;
  padding: 10px;
  width: 300px;
}

#output_section {
  height: 500px;
  width: 500px;
  border: solid black;
  margin: 10px;
  position: relative;
}

#moving_square {
  position: absolute;
  top: 400px;
  left: 400px;
  width: 100px;
  height: 100px;
  background: pink;
}

.block {
  height: 100px;
  width: 100px;
}

.red {
  background: red;
}

.blue {
  background: cyan;
}

.green {
  background: green;
}

.grey {
  background: #ccc;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="workspace"></div>
<div id="workspace-menu">
  <button id="run_workspace">Run</button>
  <button id="clear_workspace">Clear</button>
</div>
<div id="toolbox" class="grey">
  <div data-color="red" class="block red">Left</div>
  <div data-color="blue" class="block blue">Up</div>
  <div data-color="green" class="block green">Right</div>
</div>
<div id="output_section">
  <div id="moving_square"></div>
</div>

Although... jQuery was utilized primarily for handling clicks. Conversion to JS:

let mobs = {
  pinky: {
    node: document.getElementById('moving_square'),
    coors: { top: 400, left: 400 },
    step: 30,
    moveQueue: [],
  },
};

let move = {
  left: function (obj) {
    let left = obj.coors.left = (obj.coors.left - obj.step);
    obj.node.style.left = left + 'px';
  },
  up: function (obj) {
    let top = obj.coors.top = (obj.coors.top - obj.step);
    obj.node.style.top = top + 'px';
  },
  right: function (obj) {
    let left = obj.coors.left = (obj.coors.left + obj.step);
    obj.node.style.left = left + 'px';
  }
};

let stepTimeout = 1000;
let running = false;
let timeouts = {};

let blocks = document.querySelectorAll('#toolbox .block');
let workSpace = document.getElementById('workspace');

blocks.forEach(function(block){
  block.addEventListener('click', function(){
    let color = this.dataset.color;
    let workBlock = '<div class="remove-block block ' + color + '"></div>';
    
    workSpace.insertAdjacentHTML('beforeend', workBlock);
    
    mobs.pinky.moveQueue.push( this.textContent.toLowerCase() );
  });
});

document.getElementById('run_workspace').addEventListener('click', function () {
  running = true;
  runCode();

  function runCode() {
    for (let obj in mobs) { // Possible presence of multiple mobile objects
      // Inside the loop, obj matches each key name in mobs. Here, it corresponds to "pinky"
      
      let i = 0;
      let pinky = mobs[obj];

      localRun();
      
      function localRun() {
        let direction = pinky.moveQueue[i]; // Extract the direction key based on the array index
        
        move[direction](pinky); // Invoke the relevant function from storage

        if (pinky.moveQueue[++i] && running ) {
          // Once there's a subsequent element in moveQueue, initiate self-calling while incrementing i by +1
          timeouts[obj] = setTimeout(localRun, stepTimeout);
        }
      }
    }
  }

});

document.getElementById("clear_workspace").addEventListener('click', function () {
  workSpace.textContent = "";
});

workSpace.addEventListener('click', function (e) {
  if( e.target.classList.contains('remove-block') ){
    e.target.remove();
  }
});

html,
body {
  margin: 0;
  padding: 0;
}

#workspace {
  display: flex;
  height: 100px;
  padding: 10px;
  background: black;
}

#toolbox {
  display: flex;
  padding: 10px;
  width: 300px;
}

#output_section {
  height: 500px;
  width: 500px;
  border: solid black;
  margin: 10px;
  position: relative;
}

#moving_square {
  position: absolute;
  top: 400px;
  left: 400px;
  width: 100px;
  height: 100px;
  background: pink;
}

.block {
  height: 100px;
  width: 100px;
}

.red {
  background: red;
}

.blue {
  background: cyan;
}

.green {
  background: green;
}

grey {
  background: #ccc;
}

<div id="workspace"></div>
<div id="workspace-menu">
  <button id="run_workspace">Run</button>
  <button id="clear_workspace">Clear</button>
</div>
<div id="toolbox" class="grey">
  <div data-color="red" class="block red">Left</div>
  <div data-color="blue" class="block blue">Up</div>
  <div data-color="green" class="block green">Right</div>
</div>
<div id="output_section">
  <div id="moving_square"></div>
</div>

Verify if there are DOM elements located within a DIV container, execute the functions associated with those elements sequentially

Answer №1

Answer №2

Similar questions

Question about Selecting Boxes

Having difficulties loading my stylus stylesheet onto my jade HTML page using expressjs

One set of objects is active in retrieving data, while the other remains inactive

Having trouble getting my Sequelize model to export properly

SignalR does not include cookies in the connection request

What is the best way to showcase the reading from a stopwatch on my screen?

Assigning arbitrary hidden form data from dropdown selection

How can labels be added when mapping over JSON data?

Click the button to trigger an AJAX request that sends the values from the forms within a while loop

Display a list next to a block of text and image using HTML and CSS styling

The Chrome Extension is unable to recognize a portion of the URL following the # symbol in the contentscript.js code

Looking for insights on reading and presenting XML files from a URL? Learn how to achieve this effortlessly with the power

Is the fs.watch method being triggered unexpectedly?

How can we access state data in a Vuex component once it is mounted?

Encountering an issue when trying to submit a post request: "Received an API resolution without a response for /api/comments, which could lead to delayed requests."

"Implementing a dynamic loading effect in Highcharts triggered by a button

Importing textures and loading mtl files in Three.js from various web addresses

Ways to include margin right for a table

What could be the reason for the child element not occupying the full height of its parent container?

Step-by-step guide for integrating a Twig file in Symfony using Angular's ng-include feature