Simple js function

[sam_p_lay]

Can anyone tell me what's wrong with this js? Just trying to call with onClick="check_input('some words')" on the input. I'm a js n00b and don't really know how 'this' works... cheers!

[cpp]
function check_input(contents) {
if (this.value == contents) {
this.value = '';
} else {
if (this.value == '') { {
this.value = contents;
}
}
}[/cpp]

 

[Rusting In Peace]

Ensure your html element is onclick not onClick (see the case difference?).

Also ensure you have your function wrapped in the <script type="text/javascript"> tag

Most importantly you have too many closing curly brackets.

"This" refers to the element that has the onclick.

 

[randomizer]

"This" refers to the element that has the onclick.

Only if you pass it to the function. Otherwise 'this' will refer to the window object. You would need to call the function like this:

onClick="check_input(this, 'some words')"

Of course the function itself would also need another parameter to receive the reference to the element.

 

[sam_p_lay]

Thanks for the advice! I think the closing brackets are correct (end second if, end first if, end function) but I just spotted an extra opening one... probably not the cause of the problem (since I rearranged that from an elseif arrangement incase js doesn't like elseif so probably messed up when I moved it around) but of course that would still break it too.

So what I need is:

<input ... onclick="check_input(this, 'some words') />

and then

function check_input(theinput, contents) {
...
}

Something like that?

 

[Rusting In Peace]

Ah my bad randomizer. You're right it would be the global object in that scenario.

Else if statements are fine in js. So there is no need to wrap your second if in an else sam_p_lay.

It looks like you are trying to default a field to something if the user hasn't set data. If this is the case you'd probably be better using onfocus and onblur events rather than onclick.

 

[sam_p_lay]

I was doing that originally, but thought it would be more elegant to have a single function call on a single attribute!

 

[sam_p_lay]

Tried using:

<input type="text" name="name" id="quote-name" size="24" class="input" onclick="check_input(this, 'Please enter your name')" value="Please enter your name" />

With:

function check_input(the_input, contents) {
if (the_input.value == contents) {
the_input.value = '';
} elseif (the_input.value == '') {
the_input.value = contents;
}
}

But still no luck... just trying to make something like jquery.labelify that doesn't require me to use jquery. Not that there's anything wrong with jquery of course, but it adds page load time and seems like massive overkill for something that should be so simple. This kind of thing is what Javascript is made for!

 

[randomizer]

'else if' is two words, not one. This should work:

function check_input(the_input, contents) {
    if (the_input.value == contents) {
        the_input.value = '';
    }
    else if (the_input.value == '') {
        the_input.value = contents;
    }
}

As for jQuery, it certainly adds quite a lot to page load time if you use the "fat" version of it. The minified version - with variables mostly shortened to a few meaningless characters, whitespace stripped and everything on a single line - is reasonably small.

On a side note, you may want to consider the "placeholder" attribute for the text box, especially if your expected users will all use modern (excluding all IE versions) browsers. It essentially does exactly what you want without any JS needed.