javascript onclick not firing on button click

Question

I am trying to call a JS function when the user clicks a button. But the onclick event is not being fired. The developer tools shows me the following error:

Error executing:

 function (/*Event*/ e){
        // summary:
        //      Handler when the user activates the button portion.
        if(this._onClick(e) === false){ // returning nothing is same as true
            e.preventDefault(); // needed for checkbox
        }else if(this.type == "submit" && !this.focusNode.form){ // see if a nonform widget needs to be signalled
            for(var node=this.domNode; node.parentNode/*#5935*/; node=node.parentNode){
                var widget=dijit.byNode(node);
                if(widget && typeof widget._onSubmit == "function"){
                    widget._onSubmit(e);
                    break;
                }
            }
        }
    } 
ReferenceError
arguments: Array[1]
get message: function () { [native code] }
get stack: function () { [native code] }
set message: function () { [native code] }
set stack: function () { [native code] }
type: "not_defined"
__proto__: Error

Here is my code:

HTML

<td>
<button dojoType = "xwt.widget.form.TextButton" id = "pingButton" baseClass = "defaultButton" onclick = "onPing();">Ping
  </button>
   </td>

JS:

onPing : function() {
        alert('works');
    }

Any suggestions on what to do?

Answer 1

In lieu of continuing a rather bang-head-against-table thread, I will explain to both the OP and others why he is having problems.

Problem 1: The OP did not post all relevant code. The OP is apparently new to both OOP and SO and he made the fatal error of assuming less is more. We can see that there is an onPing function which is part of an object as per the colon : syntax. If he were to post all of his code, his javascript would look something like this:

var myObject = {
    onPing: function() {
        alert("works");
    }
};

It should be noted here that I am not sure what the name of his object is. I used the name myObject so as to imply "your object name here".

Problem 2: There is an onclick function which is defined inline with a button. This is not good practice and can lead to bugs... especially when so many cut-and-paste javascript snippets are written inside of closure:

(function() {
    /* 
    This is an example of closure.  
    Any variables/objects/functions defined in here are not accessible to the outside world 
    */
})();

Problem 3: The code appears to rely on an attribute type with a value submit. Therefore the button should have that attribute set:

<button type = "submit" dojoType = "xwt.widget.form.TextButton" id = "pingButton" baseClass = "defaultButton" onclick = "onPing();">Ping</button>

While a quick and dirty solution might be to declare a global function called onPing, this might cause problems with other libraries, makes the code more difficult to maintain, and is just plain ol' bad practice and should never be encouraged. So lets explore a better solution which will do the following:

• Show complete working code
• Define objects within closure
• Bind events through code, not inline

Here goes...

<button type="submit" dojoType="xwt.widget.form.TextButton" id="pingButton" baseClass="defaultButton">Ping</button>

<script>
(function() {
    var myObject = {
        onPing: function() {
            alert("works");
        }
    };

    document.getElementById('pingButton').onclick = myObject.onPing;
}());
</script>

And to be super nice, we include a jsfiddle.

Answer 2

This works

function onPing() {
        alert("this");
    }

Can leave button as it is....

<button dojoType = "xwt.widget.form.TextButton" id = "pingButton" baseClass = "defaultButton" onclick = "onPing();">Ping</button>