CODEWITHSUNDEEP
javascript
Elfayer
Elfayer

Reputation: 4561

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

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 ?

Upvotes: 2

Views: 4587

Answers (4)

drkunibar
drkunibar

Reputation: 1337

Try this

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

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

Upvotes: 0

Theofilos Mouratidis
Theofilos Mouratidis

Reputation: 1156

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);
}

Upvotes: 1

tekrat
tekrat

Reputation: 115

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);
}

Upvotes: 0

adeneo
adeneo

Reputation: 318172

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
}

Upvotes: 4

Related Questions