Code difference between normal and dijit elements

You have seen how to add an onClick event to a dijit element in Chapter 4. I like to show how the code is rendered and why the normal onclick method fail to add a handler to a click event. See the screenshot below and compare the code of the button, highlighted in blue, for a dijit and normal element.

In the above screenshot, you can notice how the "id" given for the button has been rendered as the "widgetid" by dojo engine. So if you do a query search for id="dojoButton" is no more available in the DOM and hence will result in error.

That is the reason we should write using dijit.byId method to refer the dijit elements. Just shown below is the code from chapter 4, for your reference.

dojo.connect(dijit.byId("dojoButton"), "onClick", function(){
dojo.query("#content").text("Welcome "+dijit.byId("nameText").attr("value"));
});

Keep in mind, if you use same id value for more than one element, the engine will end up in error, without applying the required effect and functionality to the dijit elements.