HTML / JavaScript Reference



Most of the JavaScript you'll want to do will interact with HTML. The graphical layout will be written in HTML and the programming logic will be written in JavaScript. One of the most common ways to trigger JavaScript is through events.

Basic Rules

HTML form elements have a variety of events that they can use. For example, a button can wait for a user to click on it, and then the onClick event will trigger. Just as attributes can go inside form tags, so do events. You can determine what happens when the event is triggered by calling a JavaScript function or writing the code within the tag. Note. With the exception of a short line of code, all events should call functions. The following code is a good example of a short line of code written in the tag.

Basic Rules - example source

<INPUT TYPE="BUTTON" VALUE="Click for pop-up box" onClick="alert('onClick event');">

Basic Rules - example output

Common Events


The onLoad event is located in the BODY tag, and is triggered when the page first loads. All the form elements have loaded by the time the onLoad event is triggered This means it is okay to call a function with onLoad to change element properties.


The onChange event is used by the <SELECT> form element. This means that when the user selects an option, we can assign some JavaScript to occur.

example source (excerpt from Pace Calculator source)

<select name=CalcWhat onChange="changePics(document.Calc.CalcWhat.selectedIndex)">
<option value=0>Time
<option value=1>Distance
<option value=2 selected>Pace


One place the onClick event can occur is in an input button.

example source (excerpt from Pace Calculator source)

<input type=button value="Calculate" onClick="calcIT()">
<input type=button value="Clear" onClick="clearNums()">
About this page: