different ways of assigning onclick events dojo - dojo

Question

The second approach, where I hardcode the input id's and connect them to onclick events works properly.
But, when I use the first approach, it doesn't work.
The code executes in this manner.
select1.on('change',function(evt) {
requiredFunction(select8.id);//select9 is not present (so I changed loop end value from inputs.length -1 to inputs.length -2 )
}
Am I missing some event handling principles in dojo?
Approach1:
function assignOnClickEvents(table) {
var inputs = document.getElementById(table).getElementsByClassName('classname');
for (var i = 0; i < (inputs.length - 1); i++) {
dijit.byId(inputs[i].id).on('change', function (evt) {
requiredFunction(inputs[i+1].id);
});
}
}
Approach2:
function assignOnClickEvents() {
var select1 = dijit.byId('select1');
var select2 = dijit.byId('select2');
var select3 = dijit.byId('select3');
var select4 = dijit.byId('select4');
var select5 = dijit.byId('select5');
var select6 = dijit.byId('select6');
var select7 = dijit.byId('select7');
var select8 = dijit.byId('select8');
var select9 = dijit.byId('select9');
select1.on('change', function (evt) {
requiredFunction('select2');
});
select2.on('change', function (evt) {
requiredFunction('select3');
});
select3.on('change', function (evt) {
requiredFunction('select4');
});
select4.on('change', function (evt) {
requiredFunction('select5');
});
select5.on('change', function (evt) {
requiredFunction('select6');
});
select6.on('change', function (evt) {
requiredFunction('select7');
});
select7.on('change', function (evt) {
requiredFunction('select8');
});
select8.on('change', function (evt) {
requiredFunction('select9');
});
}

Answer 1

You're mixing DOM node IDs and Dijit IDs. This could be a possible reason why your code isn't working.
To fix this, you could try the following approach:
var inputs = dijit.findWidgets(table); // Returns widgets, not DOM nodes
for(var i = 0;i < inputs.length - 1;i++) {
inputs[i].on('change', function(evt) {
// Remind: this returns the widget ID, not the DOM ID
requiredFunction(inputs[i+1].id);
});
}
In dojo there is a difference between widgets and DOM nodes. So using DOM functions (to retrieve a DOM node by ID or by classname) will not always work. They could work, but that's not always the fact.

Answer 2

You can also call your function requiredFunction() as follow :
<input data-dojo-attach-event="onChange:requiredFunction"></input>
This will reduce your time of looping and work similar as you want.
All the best.