getElementById doesn't work correctly

Question

Here is my code - http://jsfiddle.net/EC6jT/

<input type="text" id="mytext"> <a href='javascript:elem();'>click</a><br/> <input type="text" id="mytext2"> <a href='javascript:document.getElementById("mytext2").value = "My default value";'>click</a><br/> <script type="text/javascript"> function elem() { document.getElementById("mytext").value = "My default value"; }; </script>

Why is it that the first "click" link works correctly and the second one doesn't? Why is the second "click" link erases everything?

Thanks.

To explain the need for return false or similar, javascript:... will display the result if it's truthy -- e.g. href="javascript:"foo". elem() returns undefined by default, which is falsy. But, the assignment operator (=) returns the value being assigned. Another option is to prefix the statement with the void operator to discard any possible results -- href="javascript:void document....". — Jonathan Lonowski
– Jonathan Lonowski, Commented Jun 1, 2014 at 7:28
@JonathanLonowski Allow me to embed this in the leading answer. — Royi Namir
– Royi Namir, Commented Jun 1, 2014 at 7:41
@JonathanLonowski in you last comment , last sentenct it should be href="javascript:void(...) - parenthesis — Royi Namir
– Royi Namir, Commented Jun 16, 2014 at 12:58

Royi Namir · Accepted Answer · 2014-06-01 07:44:06Z

Instead of this

<a href='javascript:document.getElementById("mytext2").value = "My default value"; '>click</a><br/>

Use like this

<a href='javascript:document.getElementById("mytext2").value = "My default value"; return false;'>click</a><br/>

Excellent explanation from @Jonathan Lonowski

To explain the need for return false or similar, javascript:... will display the result if it's truthy -- e.g. href="javascript:"foo". elem() returns undefined by default, which is falsy. But, the assignment operator (=) returns the value being assigned. Another option is to prefix the statement with the void operator to discard any possible results -- href="javascript:void document....". –

Should probably explain the difference or at least emphasize it. Code drops aren't the best of answers.
Answers are always better if they have both code AND explanation.
Thanks Jonathan and Namir. In future definitely i will add the explanation with my answers.
I tried the "void" option and it works only if you put the rest of the code in brackets. Like that: javascript:void (document.getElementById("mytext2").value = "My default value")

Farhad Jabiyev · Accepted Answer · 2014-06-01 07:18:35Z

You have to use one of these statements at the end of your code to avoid erasing:

return false;
event.preventDefault(); //will prevent the default event from occuring
event.stopPropagation();

<a href='javascript:document.getElementById("mytext2").value = "My default value"; event.preventDefault()'>click</a><br/>

But I suggest you to use onlick event in this situation.

<a href='#' onclick='javascript:document.getElementById("mytext2").value = "My default value"'>click</a><br/>

mmmm... problematic. parent event can still be triggered. stopPropgation should also be called imho. ( return false does both)

DanKodi · Accepted Answer · 2014-06-01 07:26:35Z

<input type="text" id="mytext"> <a href='javascript:void(0);' onclick="setDefaultValue('mytext')">click</a> <br/> <input type="text" id="mytext2"> <a href='javascript:void(0);' onclick="setDefaultValue('mytext2')">click</a> <br/> <script type="text/javascript"> function setDefaultValue(id) { document.getElementById(id).value = "My default value"; }; </script>

http://jsfiddle.net/55TDx/

For better code re-useability and to be more clean use a function to handle this by passing in the id of input you want to have the default value. You can further customize this function even to show custom default values. So you only have to change one place rather than multiple places if a change is required.

Collectives™ on Stack Overflow

getElementById doesn't work correctly

3 Answers 3

4 Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Related