2

I have my textarea, when it is clicked upon I would like the text to clear

<textarea id="cow" rows="5" name="message" cols="50" onfocus="clear()" >Please provide a link to an image no wider than 500px. </textarea>

and the javascript from external js file:

var cow=document.getElementById("cow").value;
function clear(){ document.getElementById("cow").value=' '; }

I realize I could probably use Jquery, but I'm just messing around trying to learn javascript.

Evan Davis
  • 35,493
  • 6
  • 50
  • 57
Isaac Law
  • 33
  • 3
  • 3
    is your closing tag really like that, or is that a copy paste error? also, try actually using onclick instead of onfocus – PlantTheIdea Feb 13 '13 at 21:16
  • @LifeInTheGrey JacobM biffed it in the edit. – Evan Davis Feb 13 '13 at 21:17
  • If you want to learn JavaScript, [start with some lessons](http://nathansjslessons.appspot.com/). Even the minimal code you've written here is already poorly constructed. – Evan Davis Feb 13 '13 at 21:21

2 Answers2

4

Believe it or not, your code is ok, apart from the fact that you named the function clear.

Inside inline event handler, the document object is hooked up into the event handler's scope chain, in some browsers. This has the unfortunate effect that clear does not refer to your function, but to document.clear. This behavior is not standardized, so depending on which browser you use, you might see different results.

If you rename your function, it works just fine: http://jsfiddle.net/QqMsX/.

You should definitely read "Is "clear" a reserved word in Javascript?", where I also explained how to avoid such situations.

Community
  • 1
  • 1
Felix Kling
  • 795,719
  • 175
  • 1,089
  • 1,143
  • I tested that `document.clear === clear` within the handler. Can you explain what you mean by "the document object is hooked up into the event handler's scope" The scope is the `this` element, right? But there's no usage of `this` in the handler. It's like there's a hidden `with (document){}` around that handler. – Ruan Mendes Feb 13 '13 at 21:40
  • No, with "scope" I mean all the variables that are accessible inside a function. `this` is not scope.... `this` is just `this` :) Just like `window` is part of a functions scope chain (global variables), `document` is inside the scope chain of inline event handlers. – Felix Kling Feb 13 '13 at 21:41
  • That's why I asked for clarification; however, many people call `this` the `scope` of a function (not that it's correct). I do see now that you're talking about scope chain (which is what a `with(document){}` does) – Ruan Mendes Feb 13 '13 at 21:44
  • Thanks for well researched answer! I always like to know the whys behind any answer. – Iron3eagle Feb 13 '13 at 22:04
  • 1
    Thanks for fixing my problem Felix – Isaac Law Feb 15 '13 at 04:16
  • @Isaac: You're welcome! Don't forget to accept the answer that helped you the most by clicking on the checkmark next to it. – Felix Kling Feb 15 '13 at 10:13
2

It seems that the browser is trying to call document.clear instead of the clear function you created. If you rename your function to clearText, it works fine http://jsfiddle.net/7meL7/

A good way to avoid the problem is to avoid JS in attributes altogether

<textarea id="cow" rows="5" name="message" cols="50">Please provide a link to an image no wider than 500px. </textarea>

// There are better ways, but this is the simplest crossbrowser way
document.getElementById("cow").onfocus = function() {
    this.value = '';
}
Ruan Mendes
  • 90,375
  • 31
  • 153
  • 217
  • Odd they both work for me even though I tried that in my own fiddle! That my only complaint about JavaScript is it's quirkiness between browser :-) I'm going to research, I bet clear is a reserverd word somewhere in a name space. – Iron3eagle Feb 13 '13 at 21:42
  • 1
    @defaultNINJA: Have a look at my answer and the question I linked to. – Felix Kling Feb 13 '13 at 21:44
  • @defaultNINJA Yes the linked answer explains it really well – Ruan Mendes Feb 13 '13 at 21:47