JavaScript

this Keyword

The this keyword is a synonym for the current object and can be used with properties. For example, this.value can mean the data currently in this form field.

Syntax

The syntax for this is

this.[propertyname]

where propertyname is a valid property of the current object type.

Description

The keyword this actually refers to the entire HTML tag for the object to which it refers. For example, if used in an event handler of an <INPUT> tag, the term this refers to the entire HTML <INPUT...> tag.

In the example for the textarea object, we used the keyword this. to refer to the contents of the textarea field when calling the noBlanksAllowed function. However, we couldn't use this. when calling that function from the Click Me button - in the <INPUT> tag for the Click Me button, this. would refer to the button, not to the textarea field. Rather than using this, we had to spell out the reference using document.formname.fieldname as shown below:

<FORM name = "offspring">
Question:<BR>
<TEXTAREA NAME="question" ROWS=4 COLS=25 onChange = "noBlanksAllowed(this.value)">
</TEXTAREA>
<!..other tags..>
<INPUT TYPE="button" value = "Click Me" onClick =
"noBlanksAllowed(document.askme.question.value)">
</FORM>

Example

The next page we could call daughter.html because all it really does is show the meaning of this. in an alert box. It is not very practical, but it does provide some insight.

<HTML>
<HEAD>
<SCRIPT LANGUAGE = "JavaScript">
//custom function just to display the meaning of 'this.'
function showme(obj) {
//show what's in obj
var msg = "obj = "+obj
alert (msg)
//show what's in obj.name
var msg = "obj.name = "+obj.name
alert (msg)
//show what's in obj.value
var msg = "obj.value = "+obj.value
alert (msg)
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT type="button" name = "Stephanie" value="Click Me" onClick = "showme(this)">
</FORM>
</BODY>
</HTML>

When the reader clicks on the button, the <INPUT> tag calls up the showme() function, sending it the keyword this as its parameter. The function stores that parameter in a local variable named obj. Then a series of alert boxes show some information about the obj variable. The first alert box shows

obj = <input type="button" name="Stephanie" value="Click Me" onClick = 'showme(this)';>

because obj currently contains the entire definition of the object passed as this. Subsequent alert boxes show individual properties of this larger object. For instance, the second alert box shows

obj.name = Stephanie

because Stephanie is indeed the NAME attribute as defined in this object. The next alert box shows

obj.value=Click Me