basic javascript function not working

Question

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>

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. — dumbass
– dumbass, Commented Oct 8, 2024 at 15:16

James Hill · Accepted Answer · 2012-02-04 18:35:46Z

2

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:

edited Feb 4, 2012 at 18:35

answered Feb 4, 2012 at 18:26

James Hill

62.2k22 gold badges150 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

noWayhome Over a year ago

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

user1106925 Over a year ago

@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.

xdazz · Accepted Answer · 2012-02-04 18:48:31Z

2

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);"

edited Feb 4, 2012 at 18:48

answered Feb 4, 2012 at 18:28

xdazz

161k38 gold badges255 silver badges278 bronze badges

2 Comments

user1106925 Over a year ago

@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?

James Hill Over a year ago

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

Nenad · Accepted Answer · 2012-02-04 18:30:40Z

1

You can also use the placeholder attribute without javascript:

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

answered Feb 4, 2012 at 18:30

Nenad

3,5965 gold badges30 silver badges36 bronze badges

Collectives™ on Stack Overflow

basic javascript function not working

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related