Hi Im trying to attach an onclick functoion to a checkbox.
My initial attempt was this, which worked fine
checkbox.onclick = function(){
console.log("called")
if (this.checked){
total += parseFloat(this.value);
}
else{
total -= parseFloat(this.value);
}
console.log(total)
};
but the total variable I was amanding didnt have the scop I required, I wanted a global total variable. But the scop of this. has chacnged when in this function and I cant get to the global using this.total as this now refers to the checkbox.
my second attempt was this
checkbox.onclick = this._amendTotal(checkbox.id)
which called
_amendTotal: function(id){
checkbox = Dom.byId(id)
console.log(checkbox)
console.log(id)
if (this.checked){
this.total += parseFloat(checkbox.value);
}
else{
this.total -= parseFloat(checkbox.value);
}
console.log(this.total)
},
but this seemed to call it at runtime when checkbox had not been clicked and I got some undefined errors, dom.byID returns null and it crashes before its even drawn a checkbox to click.
at this point Im confused, do I need to use dojo/on, if so how do I use that to solve the problem, and why is _amendTotal being called when no click event has happened?
Cheers
Jim
Solved! Go to Solution.
Jim.
This line here is a call to the function. It is assigning the results of the call and not the function itself.
checkbox.onclick = this._amendTotal(checkbox.id)
you should be using
on(checkbox, 'click', lang.hitch(this, this.ammendTotal));
_amendTotal: function(evt){
checkbox = Dom.byId(evt.id);
console.log(checkbox);
console.log(evt.id);
if (this.checked){
this.total += parseFloat(checkbox.value);
}else{
this.total -= parseFloat(checkbox.value);
}
console.log(this.total)
},
Jim.
This line here is a call to the function. It is assigning the results of the call and not the function itself.
checkbox.onclick = this._amendTotal(checkbox.id)
you should be using
on(checkbox, 'click', lang.hitch(this, this.ammendTotal));
_amendTotal: function(evt){
checkbox = Dom.byId(evt.id);
console.log(checkbox);
console.log(evt.id);
if (this.checked){
this.total += parseFloat(checkbox.value);
}else{
this.total -= parseFloat(checkbox.value);
}
console.log(this.total)
},
Thanks again, I was just heading here to say I had managed to work it out after some reading about .this, dojo/on, and lang.hitch.
Mine does look a little different to yours, I ended up with
on(checkbox, "click", lang.hitch(this, this._amendTotal, checkbox.id))
and
_amendTotal: function(id){
checkbox = Dom.byId(id)
if (checkbox.checked){
this.total += parseFloat(checkbox.value);
}
else{
this.total -= parseFloat(checkbox.value);
}
console.log(this.total)
},
So both really similar except I'm passing in the ID and I don't have the evt bit.
Any chance you could explain the differences to help my understanding?
evt seems to hold the checkbox id, what is evt, how does it have the id? why is it not passed in in the on statement?
thanks
Jim
Jim,
When a function is fired based on a event like click the event that triggered the function is automatically passed and that event will have details on what fired the event (i.e. the id of the dom object that caused the event to fire).