Cannot read property 'on' of undefined

Question

while clicking on the button on.click event is not fired and getting error "Cannot read property 'on' of undefined",how to solve this issue.

Simple Map html, body, #map { height: 100%; width: 100%; margin: 0; padding: 0; } body { background-color: #FFF; overflow: hidden; font-family: "Trebuchet MS"; } var map,navToolbar;

  require(["esri/map",
           "dojo/dom",
           "dojo/on",
           "dijit/form/Button",
           "dojo/domReady!"], function(Map,dom,on,parser,registry) {
      map = new Map("map", {
      basemap: "streets",  
      center: [72, 25.75], 
      zoom: 5
    });
    //navToolbar = new Navigation(map);
      //on(navToolbar, "onExtentHistoryChange", extentHistoryChangeHandler);

    dijit.registry.byId("clickMe").on("click",showMessage);
    function showMessage(){
     alert("Hello")
    }       
});

</script>

Click Me

Answer 1

you are missing several modules in your require() call, so the mapping of the aliases in your callback are incorrect.

require([
  "esri/map",
  "dojo/dom",
  "dojo/on",
  "dojo/parser", // < this one
  "dijit/registry", // < and this one
  "dijit/form/Button",
  "dojo/domReady!"], function(Map, dom, on, parser, registry, Button) {

afterwards, you need to use your alias when you call on and ensure the corresponding <div> is present.

registry.byId("clickMe").on("click",showMessage);
// ...
<div id="clickMe"></div>

see this old blog of mine for more information.

related threads

• Uncaught TypeError: webMercatorUtils.webMercatorToGeographic is not a function
• uncaught type error:dom is undefined