-2

How to change the text of textbox/input by JavaScript, when its clicked

var txtSearch = document.getElementById("txtSearch");
        txtSearch.onmousedown= txtClear;

        function txtClear() {
            txtSearch.value = "";
        }
Faizan
  • 766
  • 2
  • 7
  • 19

5 Answers5

2

You need to assign the handler after the DOM is loaded:

window.onload = function() {
    var txtSearch = document.getElementById("txtSearch");
    txtSearch.onmousedown= txtClear;
};

Otherwise, it can't find the txtSearch element if your Javascript appears before the body of the HTML.

Barmar
  • 741,623
  • 53
  • 500
  • 612
0

Ahh, so if I'm correct...this is actually a common early mistake. I'm assuming this is your whole Javascript? It's not wrapped in any function? If that's the case, this question also should help with the answer:

getElementById and null - why?

Community
  • 1
  • 1
Katana314
  • 8,429
  • 2
  • 28
  • 36
-1

You'll want to use an event listener on your object and use the focus event like so (assuming the element in question here is an input):

document.getElementById("txtSearch").addEventListener("focus", function(event) {
    event.target.value = txtClear();
});

Note that you don't have to use a function to set the value (and if you do, you'll need it to return the value you want, or pass it the event as a parameter and modify that object); you could just as easily use an empty string (event.target.value = '').

James Lai
  • 2,051
  • 17
  • 14
  • Using `addEventListener` is generally preferred to setting `onXXX` directly (despite having weaker browser support), but that's a code style issue, not a fix. The code in the question is calling a function that sets the value to an empty string, it isn't setting the value to the return value of that function call. – Quentin Nov 18 '13 at 17:08
  • Sure, and it would be up to the OP to have his function actually return something useful (ie : return ''), or to update the code in question to pass the event as a parameter to the `txtClear` function and use that locally. I make a note of that immediately below the example. – James Lai Nov 18 '13 at 17:10
-1

You can do it with just one line and still working:

document.getElementById("txtSearch").onmousedown = function() { this.value = "" }
Diego Pamio
  • 1,377
  • 13
  • 21
-3

What you are doing is writing code that alters an internal variable. You did nothing to write that information to the page or "screen", if you will. The variable foo.value is more for the use of capturing text or a value, rather than writing it out.

Use document.write(xxxx); as a method to write something to a page or alter the existing HTML.

morantis
  • 106
  • 8
  • I'd really recommend against the use of document.write unless someone is just writing a 3-minute test page...The more straightforward way of thinking is just "`value` is the wrong property" EDIT: (which, in this case, I don't think is even true) – Katana314 Nov 18 '13 at 17:05
  • `document.write` will blow away the entire page since it is being called after the page has finished rendering. – Quentin Nov 18 '13 at 17:05
  • In this case, it was an example of the proper way to write information as opposed to getting information, not a solution per se. – morantis Nov 18 '13 at 17:07
  • 2
    If you want to inform someone of "the proper way" to do something, it's generally more suited to a comment than an answer. What's more, 'document.write' has never been "the proper way" in my experience. Both innerHTML and `createElement`/`appendChild` are preferable. – Katana314 Nov 18 '13 at 17:10
  • As you yourself stated, document.write can be used in very small pages. If you would have looked at the code the person provided, it is a total of maybe 8 lines of code and involves a massive use of a single text box. Why would anyone go about altering that by creating elements and using child elements? – morantis Nov 18 '13 at 17:15
  • 1
    He's not writing something to the page or altering the existing HTML. He's trying to change the content of an `` field, which is done by assigning to the `value` property. – Barmar Nov 18 '13 at 17:18
  • The size of a page has little to do with the applicability of document.write anyway. What matters is *when* it runs (before or after domready). – Quentin Nov 18 '13 at 17:22
  • It can be done that way, but look at the entire page. It is literally a one liner. There are countless ways to do it and as I see it there is no reason to do things the way he is trying to do it unless there is a lot more to handle than that single piece of HTML. – morantis Nov 18 '13 at 17:22