Where is the onclick function in this HTML snippet defined?

I read this code on HTMLCodeTutorial.com:

<FORM>
<TABLE BORDER CELLPADDING开发者_StackOverflow社区=3>
<TR>
<TD><NOBR>radius: <INPUT NAME="Circle_radius" SIZE=4></NOBR></TD>
<TD><INPUT TYPE=BUTTON OnClick="Circle_calc(this.form);" VALUE="calculate"></TD>
<TD ALIGN=RIGHT BGCOLOR="#AACCFF">
<NOBR>circumference: <INPUT NAME="Circle_circumference" SIZE=9></NOBR><BR>
<NOBR>area: <INPUT NAME="Circle_area" SIZE=9></NOBR></TD>
</TR>
</TABLE>
</FORM>

I can’t understand OnClick="Circle_calc(this.form);"

Circle_calc(this.form) isn't defined anywhere. How does this function work? Is it a built-in function in HTML?

It's not built-in. If you look at the source code, it's defined as:

<SCRIPT TYPE="text/javascript">
<!--
function Circle_calc(GeoForm)
{
var CircleRadius = GeoForm.Circle_radius.value;
if (CircleRadius >= 0)
   {
   GeoForm.Circle_circumference.value =  2 * Math.PI * CircleRadius ;
   GeoForm.Circle_area.value =  Math.PI * Math.pow(CircleRadius, 2) ;
   }
else
   {
   GeoForm.Circle_circumference.value =  "";
   GeoForm.Circle_area.value =  "";
   }
}
//-->
</SCRIPT>

Unfortunately, that's a pretty crappy tutorial using outmoded techniques and non-standard HTML elements.

Circle_calc is not a builtin function... the tutorial has simply neglected to define it, or indicate that it is defined elsewhere.

Strongly suggest you find another site for your tutorials, but unfortunately have none to recommend as I haven't needed one in a while :S

They have been quite naughty methinks,

If you do a view page source on that page, and look at the way THEY'VE done the form, then you'll see this:

    <SCRIPT TYPE="text/javascript">
<!--
function Circle_calc(GeoForm)
{
var CircleRadius = GeoForm.Circle_radius.value;
if (CircleRadius >= 0)
   {
   GeoForm.Circle_circumference.value =  2 * Math.PI * CircleRadius ;
   GeoForm.Circle_area.value =  Math.PI * Math.pow(CircleRadius, 2) ;
   }
else
   {
   GeoForm.Circle_circumference.value =  "";
   GeoForm.Circle_area.value =  "";
   }
}
//-->
</SCRIPT>


<P>

<FORM>
<TABLE BORDER CELLPADDING=3>
<TR>
<TD><NOBR>radius: <INPUT NAME="Circle_radius" SIZE=4></NOBR></TD>

<TD><INPUT TYPE=BUTTON OnClick="Circle_calc(this.form);" VALUE="calculate"></TD>
<TD ALIGN=RIGHT BGCOLOR="#AACCFF">
<NOBR>circumference: <INPUT NAME="Circle_circumference" SIZE=9></NOBR><BR>
<NOBR>area: <INPUT NAME="Circle_area" SIZE=9></NOBR></TD>
</TR>
</TABLE>
</FORM>

<P>

As you can see, you now have the HTML code in context, and you can actually see the script that the HTML executes. And as the script is inside the HTML file, you wouldn't need to have an import (if that's the right phrase) at the top of your HTML file telling it which script file to use.

Also I would strongly recommend using the W3c Schools tutorials, they're miles better and they can be found here: http://www.w3schools.com/w3c/w3c_html.asp

Actually the function is defined, it just isn't showed in the tutorial code - look at the source to find it.

In the beginning of the tutorial it is stated:

`onClick` gives the script to run when the user clicks on the input. `onClick` applies
 to buttons (submit, reset, and button), checkboxes, radio buttons, and form upload buttons.

The function is defined in the source code of the page:

function Circle_calc(GeoForm)
{
    ...
}

The function accepts the form as an argument that will be used by the JavaScript function to perform read/write operations over the values in the text fields of the form.

I hope this helps.