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>

Answer 1

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:

• QuirksMode’s explanation of this.
• MDN’s this documentation.