Javascript error: function not defined????

Anonymous User · ‎08-26-2013

however it IS defined....here:

require(["dojo/dom",
        "dojo/_base/array",
        "dojo/_base/Color",
        "dojo/parser",

...

],

function(dom, array, Color, parser, Map, esriLang, Graphic, FeatureLayer, InfoTemplate, GraphicsLayer, SimpleRenderer, Point, FeatureSet,
             ClosestFacilityTask, ClosestFacilityParameters, SimpleMarkerSymbol, SimpleLineSymbol){

      var map, incidentsGraphicsLayer, routeGraphicLayer, closestFacilityTask, params, facilitiesFeatureLayer, handler;


    function myFunction() {
      alert("Do Something");
    }

});

<body class="claro">
...

<div> <button onClick="myFunction()">Pick Point</button></div>
</body>
</html>

BenFousek · ‎08-27-2013

Sorry...use dijit.byId because it's a widget.

dijit.byId('toolBuffer').get('value');

View solution in original post

BenFousek · ‎08-26-2013

onClick will not work on html elemets. You want onclick.

<button onclick="myFunction()">Pick Point</button>

onClick is a dojo event for widgets like dijit/form/Button.

<div data-dojo-type="dijit/form/Button" data-dojo-props="label: 'Pick Point', onClick: function() { myFucntion() }"></div>

derekswingley1 · ‎08-26-2013

myFunction is not available in the global scope, which is where it needs to be if you want it to run via an onclick attribute of an html element. You could create myFunction as a global by putting:

var myFunciton;

at the root of your script tag and then:

myFunction = function() {
  alert("Do Something");
}

But that's the wrong way to do this. In general, it's bad practice to add onclick handlers via markup. Mixing JS and markup is not a good habit to develop. Instead, get a reference to your element (could use dojo/dom.byId or dojo/query) and bind a click handler with dojo/on.

Anonymous User · ‎08-26-2013

onClick will not work on html elemets. You want onclick.
<button onclick="myFunction()">Pick Point</button>
onClick is a dojo event for widgets like dijit/form/Button.
<div data-dojo-type="dijit/form/Button" data-dojo-props="label: 'Pick Point', onClick: function() { myFucntion() }"></div>

Thanks for the quick reply, Ben. However that did not remedy the issue. Same error message.

Thanks!

rGIbson

BenFousek · ‎08-26-2013

Look at Derek's post. I missed the fact myFunction() wasn't also globally available.

Anonymous User · ‎08-26-2013

Good tip....thanks, Derek.

So something like this did the trick perfectly.

registry.byId("trace").on("click", fireTrace);

function fireTrace() {
doSomething;
}

<button id="trace" data-dojo-type="dijit/form/Button">Pick Point</button>

Thanks again, Derek and Ben for your quick replies and help.

rGibson

derekswingley1 · ‎08-26-2013

Nice, glad we could help!

JeffPace · ‎08-26-2013

I know you already have an answer, but I struggled with this last week and found an even easier solution, adding one line to your code

//define a variable for your function
var myFunction = function myFunction() {
alert("Do Something");
}

//make function global
lang.setObject("myFunction", myFunction);

Anonymous User · ‎08-27-2013

However now I'm curious why this returns "undefined"

registry.byId("toolBuffer").on("click", fireBuffer);

...

function fireBuffer() {
alert(dom.byId('toolBuffer').value);
}

....

<input id="toolBuffer" data-dojo-type="dijit/form/Button" data-dojo-props="iconClass:'findNear', showLabel: false" value="buff"></button>

BenFousek · ‎08-27-2013

Try this:

Add value as property:
[HTML]<input id="toolBuffer" data-dojo-type="dijit/form/Button" data-dojo-props="iconClass:'findNear', showLabel: false, value: 'buff'"></button>[/HTML]

Use .get('value') to get the value:

dom.byId('toolBuffer').get('value');