how var checkBox, editButton and deleteButton hold more than one value?

Ok, I'll see how I go at explaining:

binTaskEvents is a function stored in a variable. This is done to save memory as it is only stored in one place, but can be used multiple times. So it is not really one variable holding multiple variables, but a function which creates the variables until the function is complete.

taskListItems has a collection of objects, like cutting a branch off a fruit tree. You will get branches, leaves, fruit and maybe flowers. The editButton, deleteButton etc are just temporary pointers to those objects for the duration of this function.

Like saying I want to find the fruit and then set a variable that points to the fruit so you don't have to search for it every time.

He's then setting an onclick or onchange event for the items found.

Did this help?

Hi Youssef,

Not sure of the example you're looking at, but most likely this is a Javascript object. I just realised that this reply got a little bit advanced, but hopefully it helps open up new thoughts about what you can do.

JS Objects are pretty similar to 'classes' in other languages as far as I'm concerned. You can have multiple variables as well as methods.

It is straight forward to code and I'll try to explain. The below creates the same object, just two different approaches:

// Create blank object
var player = {};
// Set coordinates
player.name = "John";
player.hitPoints = 20;
player.takeDamage = function(dmg) {
  this.hitPoints -= dmg;
};

// Create above object and define
var player = {
  name : "John",
  hitPoints : 20,
  takeDamage = function(dmg) {
    this.hitPoints -= dmg;
  }
};

This allows you to group multiple variables together and leads to cleaner code. Sorry I don't know the correct terminology, but you can also create a definition and instantiate it so you can quickly make multiple objects:

function Monster(name, hitPoints, attackDamage) {
  this.name = name;
  this.hp = hitPoints;
  this.damage = attackDamage;
  this.takeDamage = function(dmg) {
    this.hp -= dmg;
    if (this.hp < 0) {
      alert(this.name + " is dead!");
    }
  };
}

var monster1 = new Monster("Sludge",20,2);

// You can then use this in your code like:
alert("The " + monster1.name + " has " + monster1.hp + " hit points!");

monster1.takeDamage(21);

Hi Damien, thanks for your reply.

here is the code:

var bindTaskEvents = function(taskListItems, checkBoxEventHandler){ console.log('Bind list item events');

var checkBox = taskListItems.querySelector('input[type=checkbox]');

var editButton = taskListItems.querySelector('button[class=edit]');
var editButton = taskListItems.querySelector('button.edit');
var deleteButton = taskListItems.querySelector('button.delete');

editButton.onclick = editTask;

deleteButton.onclick = deleteTask;

checkBox.onchange = checkBoxEventHandler;
}

addButton.onclick = addTask;

for(var i=0; i<incompleteTaskHolder.children.length; i++){ bindTaskEvents(incompleteTaskHolder.children[i], taskCompleted) }

for(var i=0; i<completedTasksHolder.children.length; i++){ bindTaskEvents(completedTasksHolder.children[i], taskIncomplete) }

yes thanks so much.