Changing text with buttons
This program shows how to change the contents of an HTML text box with an HTML button.
Programming Issues
The first thing we have to do when using JavaScript is to get the code itself into the HTML document. There are a number of ways to do this:
- Embed the code directly into the document between HTML
<script></script>tags; - Embed the code directly into an HTML tag attribute that accepts a URL (e.g.
<a href="javascript: confirm('Are you sure you want to follow this link?')">); or - Include the code in an external file and link to that file in the
<head>section of the HTML document (e.g.<script type="text/javascript" src="basicform1.js"></script>). (Actually, this method can be used to insert the code anywhere within the document, not just in the<head>section.)
In most of our examples, we will use the third method. This is preferable for a number of reasons:
- It keeps the HTML document itself simple and clean;
- It avoids confusing some very old browsers that cannot handle JavaScript properly; and
- It enables the code to be reused easily by other HTML documents.
We shall see later that there are occasions when the code must be embedded directly into the HTML documents, as well as occasions where it is just easier to do so.
In this case, our code consists of a single function which is called when the push button is clicked.
When a document element is clicked, an event is triggered; in this case, the onclick event
is triggered. We can specify an event handler as an attribute to any HTML element to catch that
event, and to take some action as a result. Note: you are likely to encounter many situations where you see the second word of each event capitalised,
e.g. onClick rather than onclick as we have used. This is valid in HTML, but in XHTML (which we use on this
site) all event names must be entirely in lower case (this works in both HTML and XHTML).
What we want to do here is to catch the onclick event for our push button, and to call our
changeText() function when it occurs. If you view the HTML source for this page, you'll see the code:
<input type="button" value="Click me!" onclick="changeText()" />. The
onclick="" code is our event handler, and the statement changeText() simply calls
our function when that event occurs, or when it is "caught."
The code for the function itself is contained within the file basicform1.js, which is specified in
the <head> section of this page. The function is defined with the code: function
changeText() { … }, the curly braces enclosing the body of the function, the group of statements that
comprise it.
The logic for our function is simple: if the text box contains the text "Now you see me!", the
function changes it to "Now you don't!"; if the text box contains anything else, the function
changes it back to "Now you see me!".
We can access the value in the text box using the code:
document.forms["basicForm"].textBox.value. This is an
illustration of the document object model. document is an object that represents the
HTML document as a whole. Documents contain forms, so document.forms["basicForm"] refers to a specific
form within that document. Note that basicForm is the id we have given to this specific form,
which you can see in the HTML code: <form action="none" method="post"
id="basicForm"> - we could have chosen to give the form another id if we had wanted. Forms
contain elements, so document.forms["basicForm"].textBox refers to a
specific element in basicForm, in this case the text box. This time, we gave the text box the name
textBox in the HTML: <input type="text" name="textBox" value="Now you see
me!" size="20" />. (Note: you may also see examples where the name
attribute is used for the form instead of the id attribute, and the object accessed by:
document.basicForm.textBox. This looks easier and cleaner. However, the name attribute is
deprecated for the <form> tag in XHTML, meaning it will eventually be removed from the
specification of the language. For this reason, we use id instead, even if it does mean a little more work
for us.)
The code document.forms["basicForm"].textBox therefore refers to a specific
object, in this case a specific text box in a specific form. Most objects have attributes which contain
information about them. A text box object has the attribute value which contains the text within it. Therefore
our script can read the text in the text box by accessing the value attribute in this way:
document.forms["basicForm"].textBox.value. We can also change the text
in the text box by assigning a value to that attribute.
Thus we can see how the code of our function works:
function changeText() {
if ( document.forms["basicForm"].textBox.value == "Now you see me!" )
document.forms["basicForm"].textBox.value = "Now you don't!";
else
document.forms["basicForm"].textBox.value = "Now you see me!";
}Note that:
- Every statement is terminated with a semi-colon (;);
- The conditional expression for the
ifstatement is enclosed in parentheses; - We use the
==operator to test for equality, but we use the=operator to assign a value. This is often counter-intuitive: it seems natural to use the "equals sign" to test whether one thing "equals" another. However, in JavaScript, we must use the==operator to do this, or the script will not work as intended. Using=instead of==is a very common error.
The statement following the if statement is only executed if the conditional expression evalutes to
true, i.e. if the text box contains "Now you see me!". The statement following
the else statement is only executed if the condition expresses does not evaluate to
true, i.e. if the text box does not contain "Now you see me!".
By testing the value of the text box in this way, the script decides what to change that value to.
In this example, as in all the examples, you can look at (and download) the JavaScript code by following the link in the "Source and Downloads" section towards the bottom of the page. You can look at the associated HTML code by simply using the "view source" functionality of your browser. You can see the HTML and JavaScript example in action in the "Demonstration" section of each page, which follows this one.
Finally, another common (and sometimes hard to detect) error when writing JavaScript arises not because there is a problem with the JavaScript, but because there is a problem with the HTML. We recommend validating your HTML using the W3C validator to check the validity of your HTML if your scripts are not working as expected.