basic javascript function not working

Question 1

I would like my script to check the textarea box when a user clicks on it and if it has the value "Add additional information here!" to make the box blank and change the text color to #000. it starts out as grey.

javascript

function changeMessage() {
 if(this.value=='Add additional information here!') 
 {this.value='';this.style.color='#000';}
}

HTML

<textarea name="message" id="message_input" rows="4" cols="21" maxlength="200"
 onfocus="changeMessage();" 
 onblur="changeMessageBack();"
 >Add additional information here!</textarea>

Question 2

This question is similar to: How does the "this" keyword work, and when should it be used?. If you believe it’s different, please edit the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem.

Question 3

In the context of changeMessage(), this does not refer to your text area. Try passing in your text area object like this:

JS:

function changeMessage(obj) {
 if(obj.value=='Add additional information here!') {
 obj.value='';
 obj.style.color='#000';
 }
}

HTML

<textarea name="message" id="message_input" rows="4" cols="21" maxlength="200"
 onfocus="changeMessage(this);" 
 onblur="changeMessageBack(this);"
 >Add additional information here!</textarea>

Here's a working fiddle to demonstrate.

Additional Information:

Question 4

ya that works. i thought this always refers to the element that it is in?

Question 5

@noWayhome: It does, but your "changeMessage(this);" becomes the body of an anonymous function, so it's in that function that this refers to the element. When you invoke a function from inside another, JavaScript doesn't automatically set this in the function you're invoking to the current value. You need to do that manually. The answer from @xdazz shows how.

Question 6

When you called changeMessage() in global scope, the this refers the window object, while you can tell the runtime the value of this provided for the call to function by use .call.

Change onfocus="changeMessage();" to onfocus="changeMessage.call(this);"

Question 7

@JamesHill: If you're down-voting answers for offering no explanation, then why just this answer? Why didn't you down-vote the other answer that offered no explanation?

Question 8

@xdazz, Thanks for the explanation! I learned something new today :)

Question 9

You can also use the placeholder attribute without javascript:

<input type="text" name="the_name" placeholder="Add additional information here!">

James Hill 62.2k22 gold badges150 silver badges166 bronze badges · Accepted Answer · 2012-02-04 18:26:58Z

In the context of changeMessage(), this does not refer to your text area. Try passing in your text area object like this:

JS:

function changeMessage(obj) {
 if(obj.value=='Add additional information here!') {
 obj.value='';
 obj.style.color='#000';
 }
}

HTML

<textarea name="message" id="message_input" rows="4" cols="21" maxlength="200"
 onfocus="changeMessage(this);" 
 onblur="changeMessageBack(this);"
 >Add additional information here!</textarea>

Here's a working fiddle to demonstrate.

Additional Information:

ya that works. i thought this always refers to the element that it is in?
@noWayhome: It does, but your "changeMessage(this);" becomes the body of an anonymous function, so it's in that function that this refers to the element. When you invoke a function from inside another, JavaScript doesn't automatically set this in the function you're invoking to the current value. You need to do that manually. The answer from @xdazz shows how.

CollectivesTM on Stack Overflow

basic javascript function not working

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Linked

Hot Network Questions

CollectivesTM on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Linked

Related