What is the keyword "this"

Using "this" in a script but not sure what it does

Page 1 of 1

3 Replies - 927 Views - Last Post: 23 February 2009 - 01:29 PM

#1 midasxl  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 193
  • Joined: 03-December 08

What is the keyword "this"

Post icon  Posted 20 February 2009 - 01:05 PM

Hello and thanks for your time. I have a javascript that makes use of "this" and I'm wondering exactly what it does and what it references. I'm sure this is a classic question, so please pardon my ignorance.

The html:
<fieldset><strong>Choose Report Type:</strong></fieldset><br />
							<select id="reportType" name="reportType" onchange="chooseReportType(this)">
								<option id="ChooseOne" value="0">-- Choose One --</option>
								<cfloop query="parameterType">
									<option id="#parameterType.Rpt_Info_ID#" value="#parameterType.Rpt_Name#">#parameterType.Rpt_Name#</option>
								</cfloop>
							</select>



The script:
<script type="text/javascript">							
function chooseReportType(type){
	if(type.value == "IPB List and Count"){
		document.getElementById('send').style.display = "none";
		document.getElementById('listDiv').style.display = "none";
		ParamTypeDropDown(type);
	}else if(type.value == "IPB Detail List" || type.value == "DNS Detail List"){
		document.getElementById('listDiv').style.display = "block";
		document.getElementById('send').style.display = "none";
		ParamTypeDropDown(type);
	}else{
		//Do nothing
	}	
	collectParameter(type); //line 83 of main.js
}
</script>



What I am seeing is that when you make a selection from the selection box in the html it calls a javascript function called chooseReportType(this).

So what is "this"? Is it referring to the selection you made? And why in the javascript does the function "chooseReportType(type)" have "type" instead of "this"?

Does the selection you make become the value of the variable "type" in the javascript? I'm just guessing here. This particular topic has always confused me. Thanks for any clarification you may be able to provide! Cheers!

Is This A Good Question/Topic? 0
  • +

Replies To: What is the keyword "this"

#2 pr4y  Icon User is offline

  • Location: 127.0.0.1
  • member icon

Reputation: 35
  • View blog
  • Posts: 621
  • Joined: 19-September 08

Re: What is the keyword "this"

Posted 20 February 2009 - 01:09 PM

The this pointer references the given argument to the function itself. As you can see, the function checks the value of the function's parameters (using if statements) and returns the given data. "This" is generally used as a pointer to the local class / function.

This post has been edited by pr4y: 20 February 2009 - 01:13 PM

Was This Post Helpful? 0
  • +
  • -

#3 midasxl  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 193
  • Joined: 03-December 08

Re: What is the keyword "this"

Posted 22 February 2009 - 09:58 AM

Thanks for the response. I understand the logic behind all of this, but a few things are still escaping me.

Referencing the same code, it's obvious that "this" is referring to the selection that the user makes from the html drop down menu. So "this" equals the value of the selection (let's say it's "IPB List and Count")

<fieldset><strong>Choose Report Type:</strong></fieldset><br />
							<select id="reportType" name="reportType" onchange="chooseReportType(this)">
								<option id="ChooseOne" value="0">-- Choose One --</option>
								<cfloop query="parameterType">
									<option id="#parameterType.Rpt_Info_ID#" value="#parameterType.Rpt_Name#">#parameterType.Rpt_Name#</option>
								</cfloop>
							</select>


Then the function chooseReportType(type) evaluates "this" via if statements using type.value. So apparently "type" has been passed the value of "this". So type.value equals "this", which again is the selection made by the user.

<script type="text/javascript">							
function chooseReportType(type){
	if(type.value == "IPB List and Count"){
		document.getElementById('send').style.display = "none";
		document.getElementById('listDiv').style.display = "none";
		ParamTypeDropDown(type);
	}else if(type.value == "IPB Detail List" || type.value == "DNS Detail List"){
		document.getElementById('listDiv').style.display = "block";
		document.getElementById('send').style.display = "none";
		ParamTypeDropDown(type);
	}else{
		//Do nothing
	}	
	collectParameter(type); //line 83 of main.js
}
</script>



So, if type.value = "IPB List and Count" the script gets 'send' and 'listDiv' and applies the style.display = "none" to them.

Right after that I see ParamTypeDropDown(type).

Then, later in the script I see a function called ParamTypeDropDown(reportType)

function ParamTypeDropDown(reportType) {
document.getElementById('chooseParameterType').innerHTML = ' ';



What's happening here? Is type (which equals "this" (IPB List and Count))now being passed to the function ParamTypeDropDown(reportType) and does "reportType" now equal "IPB List and Count"?

Sorry if this is getting a little confusing. I'm just not entirely clear on how these function pass data to each other. I am assuming that whatever is in the parentheses of the function acts as a variable with a value of whatever is passed from the previous script action.

Thanks again for any additional clarification. Cheers!

This post has been edited by midasxl: 22 February 2009 - 10:29 AM

Was This Post Helpful? 0
  • +
  • -

#4 doWhileSomething  Icon User is offline

  • D.I.C Head

Reputation: 11
  • View blog
  • Posts: 96
  • Joined: 08-January 09

Re: What is the keyword "this"

Posted 23 February 2009 - 01:29 PM

"this" points to an object in the given scope, and is sometimes used inproperly (causes hard to find bugs).
 <input type="text" id="myTextBox" name="myTextBox" 
		 onkeydown="alert(this.value);" />


In the above example, "this" refers to the input control. So, if you have a call on a control (like the example below)
it will pass in a pointer to the input box and give you access to all the properties it contains.

  <script language="javascript">
	function alertMe(el) { alert('Control ID: ' + el.id + ' Control Value: ' + el.value); }
 </script>

 <input type="text" id="myTextBox" name="myTextBox" 
		 onkeydown="alertMe(this);" />




Hope this helps :^:
Was This Post Helpful? 1

Page 1 of 1