Updating parameters in a javascript function using element ID

Question

I'm trying to update the parameters of a function based on a an element ID. The below code works as intended since the ID parameters are hardcoded.

window.setInterval(function() {
    $('#result').text(collision_(
        $('#task1'), $('#task2'), $('#task3'), $('#task4')
    ));
}, 200);

When I try to compile the parameters dynamically the function isn't working.

window.setInterval(function() {
    function workerTasks() {
        var task = document.getElementById("worker1").children;
        var tasks = [];
        for (i = 0; i <= task.length - 1; i++) {
            tasks.push($("#" + task[i].id))
        }
        return tasks;
    }

    $('#result').text(collision_(tasks));
}, 200);

Any help would be greatly appreciated!

UPDATED CODE BELOW ---------

I'm pairing this with draggable collision functions that are driven off of the true or false response - but I'm still not able to indicate the array from 'workerTasks' to be used by 'collision_'.

$(document).ready(function(){
      setInterval(function() {
        $('#result').text(collision_(workerTasks()));
            console.log(tasks);
      }, 200);
    });

    function workerTasks() {
      var tasks = '';
      $('#worker1 [id^=task]').each(function(i){
        var comma = $('#worker1 [id^=task]').length == i ? '' : ',';
        tasks += $('#' + $(this).attr('id'))  + comma;
      });
      return tasks;
    }

                    function collision_() {
                            if (arguments.length > 1) {
                                    for (var x = 0; x < arguments.length; x++) {
                                            for (var y = 1; y < arguments.length; y++) {
                                                    if (x == y) {
                                                            continue;
                                                    }
                                                    if (collision(arguments[x], arguments[y])) {
                                                            return true;
                                                    }
                                            }
                                    }
                                    return false;
                            }
                    }

                    function collision($div1, $div2) {
                        var x1 = $div1.offset().left;
                        var y1 = $div1.offset().top;
                        var h1 = $div1.outerHeight(true);
                        var w1 = $div1.outerWidth(false);
                        var b1 = y1 + h1;
                        var r1 = x1 + w1;
                        var x2 = $div2.offset().left;
                        var y2 = $div2.offset().top;
                        var h2 = $div2.outerHeight(true);
                        var w2 = $div2.outerWidth(false);
                        var b2 = y2 + h2;
                        var r2 = x2 + w2;

                        if (b1 < y2 || y1 > b2 || r1 < x2 || x1> r2) return false;
                        return true;
                        }

Answer 1

Your last line should be

$('#result').text(function_(workerTasks()));

and that workerTasks() function I would move it to outside of your setInterval function.

So it would be

function workerTasks() {
   var task = document.getElementById("worker1").children;
   var tasks = [];
   for (i = 0; i <= task.length - 1; i++) {
       tasks.push($("#" + task[i].id))
   }
   return tasks;
}

window.setInterval(function() {
    $('#result').text(function_(workerTasks()));
}, 200);

Answer 2

Ok I'll post my answer to solve this code issue even if I believe there is no need for all this code if you just showing function_ content

1st : I don't prefer mixing jquery with pure js

2nd : There is no mean to save tasks as an array while function_ not accept array as a parameter

So your code should be something like this

$(document).ready(function(){        
  setInterval(function() {
    $('#result').text(function_(workerTasks()));
  }, 200);
});
function workerTasks() {
  var tasks = '';
  $('#worker1 [id^=task]').each(function(i){
    var comma = $('#worker1 [id^=task]').length == i ? '' : ',';
    tasks += $('#' + $(this).attr('id'))  + comma;
  });
  return tasks;
}

Update : After edited the question with the collision and collision_ functions .. See the next demo

 $(document).ready(function(){ setInterval(function() { $('#result').text(collision_(workerTasks())); }, 200); $('button').on('click' , function(){ $(this).closest('div').remove(); }); }); function workerTasks() { var tasks = []; $('#worker1 [id^=task]').each(function(i){ tasks.push($('#' + $(this).attr('id'))); }); return tasks; } function collision_(objArr) { if (objArr.length > 1) { for (var x = 0; x < objArr.length; x++) { for (var y = 1; y < objArr.length; y++) { if (x == y) { continue; } if (collision(objArr[x], objArr[y])) { return true; } } } }else{ return false; } } function collision($div1, $div2) { var x1 = $div1.offset().left; var y1 = $div1.offset().top; var h1 = $div1.outerHeight(true); var w1 = $div1.outerWidth(false); var b1 = y1 + h1; var r1 = x1 + w1; var x2 = $div2.offset().left; var y2 = $div2.offset().top; var h2 = $div2.outerHeight(true); var w2 = $div2.outerWidth(false); var b2 = y2 + h2; var r2 = x2 + w2; if (b1 < y2 || y1 > b2 || r1 < x2 || x1> r2){ return false; }else{ return true; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="worker1"> <div id="task1">Task 1 <button>X</button></div> <div id="task2">Task 2 <button>X</button></div> <div id="task3">Task 3 <button>X</button></div> <div id="task4">Task 4 <button>X</button></div> </div> <div id="result"></div> 

 $(document).ready(function(){ setInterval(function() { $('#result').text(collision_(workerTasks())); }, 200); $('button').on('click' , function(){ $(this).closest('div').remove(); }); }); function workerTasks() { var tasks = []; $('#worker1 [id^=task]').each(function(i){ tasks.push('#' + $(this).attr('id')); }); return tasks; } function collision_(objArr) { if (objArr.length > 1) { for (var x = 0; x < objArr.length; x++) { for (var y = 1; y < objArr.length; y++) { if (x !== y) { if (collision(objArr[x], objArr[y])) { return true; } }else{ return false; } } } }else{ return false; } } function collision($div1, $div2) { var x1 = $($div1).offset().left; var y1 = $($div1).offset().top; var h1 = $($div1).outerHeight(true); var w1 = $($div1).outerWidth(false); var b1 = y1 + h1; var r1 = x1 + w1; var x2 = $($div2).offset().left; var y2 = $($div2).offset().top; var h2 = $($div2).outerHeight(true); var w2 = $($div2).outerWidth(false); var b2 = y2 + h2; var r2 = x2 + w2; if (b1 < y2 || y1 > b2 || r1 < x2 || x1> r2){ return false; }else{ return true; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="worker1"> <div id="task1">Task 1 <button>X</button></div> <div id="task2">Task 2 <button>X</button></div> <div id="task3">Task 3 <button>X</button></div> <div id="task4">Task 4 <button>X</button></div> </div> <div id="result"></div>