trouble with "this" - JavaScript and AJAX forum at WebmasterWorld - WebmasterWorld

Forum Moderators: open

Message Too Old, No Replies

trouble with "this"

snehula

2:09 pm on Jul 20, 2011 (gmt 0)

10+ Year Member

Hi there,

Straight to the point, here's the problem I have:

function someFunction(somevar) {
//somevar is the value of the textbox calling the function on an onBlur
if(somecondition) {
alert("Please make sure you enter VALID information");
this.value="";
this.focus();
}
}

basically, if the condition becomes true, I want to clear the textbox, set the focus back on it, along with the alert. Now, I get the alert, but the textbox doesn't get cleared or focused. As far as I know, the this keyword refers to the html element that called the function (the textbox), therefore I thought setting this.value would clear the textbox and simply doing this.focus() would do the job of focusing back on it, but apparently I was wrong.. Do I have to give the textbox an id and do document.getElementById(this.id).innerHTML="" ? and what's the story with the this.focus(), i tried it without brackets as well but no success. I have this beginner feeling like I can't see the forest for the trees...

Sorry if I'm the millionth bfu asking this sort of question but I haven't found the right answer..

rocknbil

4:47 pm on Jul 20, 2011 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

"this" in that context refers to the function itself. Try this (yeah, horrible intentional pun . . . ) tested code.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html lang="en"> 
<head> 
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
 <title>Untitled</title> 
<script type="text/javascript"> 
window.onload=function() {  
 if (document.getElementById('mybox')) { 
 document.getElementById('mybox').onblur=function() { someFunction(this); }; 
 } 
}; 
function someFunction(somevar) { 
 // somevar is now a reference to the OBJECT 
 // verify this by uncommenting these alerts 
 // alert(somevar.id); 
 // alert(somevar.value); 
 if(somevar.value=='') { 
 alert("Please make sure you enter VALID information."); 
 somevar.value='Please enter valid information.'; 
 somevar.focus(); 
 } 
} 
</script> 
</head> 
<body> 
<form> 
<textarea name="mybox" id="mybox">Please enter valid information.</textarea> 
<input type="button" value="This button won't do anything"> 
</form> 
</body> 
</html>

Edit: Hmm, can't get the focus to work in FF though, out of time, maybe someone can pick that up . . .

penders

7:00 pm on Jul 20, 2011 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

"this" in that context refers to the function itself.

Doesn't the context (and the value of the 'this' keyword) inside the event handler (ie. function) depend on how the event handler is registered? How is the event handler registered?

If the event handler is assigned inline to the onblur attribute:

<textarea name="mybox" id="mybox" onblur="someFunction()">

Or, within a (anonymous) function assigned to the onblur property:

document.getElementById('mybox').onblur=function() { someFunction(); };

Then 'this' in the context of someFunction() refers to the global window object.

If, however, you assign someFunction directly to the onblur property:

document.getElementById('mybox').onblur = someFunction;

Then 'this' in the context of someFunction() refers to the element on which the event occurred.

Or, you can explicitly pass 'this' to someFunction from the scope of the event handler, as in rocknbil's script:

document.getElementById('mybox').onblur=function() { someFunction(this); };

'this' in this context refers to the element on which the event occurred and can be picked up inside that function.

penders

8:56 pm on Jul 20, 2011 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

Doesn't the context (and the value of the 'this' keyword) inside the event handler (ie. function) depend on how the event handler is registered?

Actually, I'm not sure that this is strictly true (questioning myself)! See if I can word this better...

The value of 'this' inside of someFunction() depends on how the function is called. Whether it is actually registered as the event handler (in which case 'this' refers to the element on which the event occurred) or whether someFunction() is actually called from within the event handler (ie. it is not actually registered as the event handler, although you might think it is), in which case 'this' in the context of someFunction() refers to the global window object.

rocknbil

4:53 pm on Jul 21, 2011 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

You're probably absolutely correct. Ignore that statement. :-) The real point is, "this" is not properly referring to the object.

And I still don't know why focus() fails in FF. I looked up a project later in the day that uses focus() on a text field and it's fine . . . "probably something I'm missing . . . "

snehula

10:46 am on Aug 3, 2011 (gmt 0)

10+ Year Member

thanx for your replies :-)