/    Sign up×
Community /Pin to ProfileBookmark

Using "this" keyword when calling a function

I’m practicing in Javascript learning how to change text to italics, bold, etc.,.by calling a function. I’m just interested in someone clarifying the use of “this” keyword.

Here’s the code using “this”:

[CODE]

<html>
<head>
</head>
<body>
<script language=”javascript”>
function makeItalics(text1) {

document.write(“<i>” + text1 + “</i>”);

}

</script>

<input type=”text” size=”50″ name=”text1″ value=”hello” onFocus=”makeItalics(this.value)”>
</body>
</html>

[/CODE]

When the function is called at the onFocus event, the word “hello” is italicized.

Then I tried the code as follows:

[CODE]

<html>
<head>
</head>
<body>
<script language=”javascript”>
function makeItalics() {

document.write(“<i>” + text1 + “</i>”);

}

</script>

<input type=”text” size=”50″ name=”text1″ value=”hello” onFocus=”makeItalics()”>
</body>
</html>

[/CODE]

At the onFocus event, [object] is displayed in the browser window, in italics.
When the function is called, I’ve referenced the “text1” name in document.write, so why wouldn’t “hello” have appeared in italics?

to post a comment
JavaScript

1 Comments(s)

Copy linkTweet thisAlerts:
@astupidnameJun 16.2009 — You have a few errors here. Number one, the first example only APPEARS to work, but is actually wiping out the page and drawing a completely new one because you are using document.write after the page has loaded. DO NOT USE document.write AFTER the page has loaded! Also, in the first example, passing this.value will only allow the function to work on a string value, and won't be able to access the 'this' object it's self, so passing 'this' to pass the object it's self would be the way to do it. The second example has document.write flaw mentioned earlier also, and in addition text1 is not actually defined anywheres (it is a name of an object, but is not being used as a string value in the function). What you are really trying to do is the below (note since the page has loaded already, all it takes is an adjustment to the objects style):

[code=html]<html>
<head>
</head>
<body>
<script type="text/javascript">
function makeItalics(obj) {
obj.style.fontStyle = 'italic';
}

</script>

<input type="text" size="50" name="text1" value="hello" onfocus="makeItalics(this);">
</body>
</html>[/code]
×

Success!

Help @MichiKen spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...