I have the following code in a .js file:

function clearVillage()
{
	/*Do Something...*/
}

Now in my HTML page generate through PHP, If I call this function through a link like this:

<a class="fg-button ui-state-default ui-corner-all" onclick="clearVillage();" >Clear Village</a>

It works. However, if I replace the link with a button:

<input type="button" name="clearVillage" value="Clear Village" onclick="clearVillage()" />

It stops working. I get the error: clearVillage is not a function Line 1 Suggestions??

Hmm, off the top of my head, name is depreciated. What browser are you trying? Swap out "name" for "id".

Also, try

onclick="return clearVillage();"

Some browsers, (IE usually), likes the return keyword at times.

Also,

Check to ensure the button isn't calling the function before the function is declared. (i.e. is the function declared in the <head> tag?)

IIRC, only IE will give that problem, which is caused by name="clearVillage" hijacking the member clearVillage, ie. it is no longer a function.

By rights, HTML element names should be independent of javascript vars but IE tries to make things simple for js programmers and kinda screws things up in the process.

The fix is to give the button a different name or no name at all. As far as I can see, it doesn't need a name.

Airshow

Thanks Guys!

This worked:

<input type="button" value="Clear Village" onclick="return clearVillage();" />