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 ?
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
}
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);
}
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);
}
Try this
function appendUnit() {
var newDiv = document.createElement("div");
[...]
newDiv.onclick = function(){
selectUnit(this.id); // This throws me undefined
}
document.getElementById("unitsList").appendChild(newDiv);
}
appendUnitis called?<div id="buy" class="actionButton" onclick="buyUnit()">Buy</div>buyUnit() function call appendUnit().