topic Re: onclick function scope problems, is this when I need dojo/on ? in Web AppBuilder Custom Widgets Questions

onclick function scope problems, is this when I need dojo/on ?

JamesHone1 — Sun, 12 Dec 2021 09:45:33 GMT

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

Re: onclick function scope problems, is this when I need dojo/on ?

RobertScheitlin__GISP — Sun, 12 Dec 2021 09:45:36 GMT

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)
},‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: onclick function scope problems, is this when I need dojo/on ?

JamesHone1 — Sun, 12 Dec 2021 09:45:38 GMT

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

Re: onclick function scope problems, is this when I need dojo/on ?

RobertScheitlin__GISP — Tue, 17 Sep 2019 14:36:44 GMT

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).