JS - How to add an onclick event to a div with parameter?

Question

I know how to add an onclick event to a div without parameter :

newDiv.onclick = selectUnit;

function selectUnit() {}

But I could not make it work with parameters :

function appendUnit(nb) {
    var newDiv = document.createElement("div");

    newDiv.id = "unit" + nb;
    newDiv.onclick = selectUnit(this.id); // This throws me undefined
    document.getElementById("unitsList").appendChild(newDiv);
}

function selectUnit(id) {
    console.debug(id);
}

How can I do that ?

Answer 1

You'll need an anonymous function for that, as there is no way to pass arguments to a referenced function

function appendUnit() {
    var newDiv = document.createElement("div");

    newDiv.onclick = function() {
        selectUnit(this.id);
    }

    document.getElementById("unitsList").appendChild(newDiv);
}

function selectUnit(id) {
    console.debug(id);
}

but note that the value of this will keep, so you can do

function appendUnit() {
    var newDiv = document.createElement("div");

    newDiv.onclick = selectUnit;

    document.getElementById("unitsList").appendChild(newDiv);
}

function selectUnit() {
    console.debug( this.id ); // this is still the same here
}

Answer 2

With that line of code

newDiv.onclick = selectUnit(this.id);

you just call the function, get its result and store it to the onclick handler.

A function with no return defined inside returns undefined. The this.id will refer to the this element you currently have at your scope which may be the window object.

When the onclick happens, somewhere chrome will call this function

DOMElement.onclick(EventObject);

And with your line it will be something like this

(undefined)(this.id);

which leads to errors

All you have to do is to set onclick with a method

newDiv.onclick = selectUnit;

And chrome will call this

DOMElement.onclick(EventObject);

Having DOMElement.onclick == selectUnit we can assume the upper line of code is similar to this:

selectUnit(EventObject);

Then on your selectUnit function you must know how to access the id . You can see at https://developer.mozilla.org/en-US/docs/Web/API/Event what you can do with it. So the new selectUnit function will be:

function selectUnit(event) {
    var id = event.target.id;
    console.debug(id);
}

Answer 3

You never set the id in your example code:

function appendUnit() {
    var newDiv = document.createElement("div");
    newDiv.id = "somevalue";

    [...]
    newDiv.onclick = "selectUnit(this.id);" // This throws me undefined
    document.getElementById("unitsList").appendChild(newDiv);
}

function selectUnit(id) {
    console.debug(id);
}

Answer 4

Try this

function appendUnit() {
    var newDiv = document.createElement("div");

    [...]
    newDiv.onclick = function(){
        selectUnit(newDiv.id); // This throws me undefined
    }
    document.getElementById("unitsList").appendChild(newDiv);
}