homepage Welcome to WebmasterWorld Guest from 54.205.254.108
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
trouble with "this"
snehula




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

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




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

"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




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

"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




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

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




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

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




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

thanx for your replies :-)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved