The variable this

A JavaScript function is an object; when a function is called, the this property has the value of the object that called the function.

In this part of the example, this is the button object, since the single-line script is the value of the button's onclick attribute.

<button onclick="this.textContent='Request granted'">
  Click to change the button
</button>

In contrast, in this part of the example, this is the paragraph, since the scripts are the values of the paragraph's onmouseover and onmouseout attributes.

<p id="changehere"
  onmouseover="this.style.color='red'"
  onmouseout="this.style.color='black'">
  Mouse over this paragraph to see the colour change.
</p>

Before doing so, guess what will happen when you click on the button or mouse over the paragraph.

Note:

Hints:

  • undefined
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
<!DOCTYPE html>
<html lang="en">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX