GetElementById is not working properly

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 the first click link working correctly and the second not? Why does the second "click" link delete everything?

Thank.

Answer 1

Instead of this

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

Use it as

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

Great explanation from @Jonathan Lonowski

return false , javascript:... , - , href="javascript:"foo". elem() undefined, . (=) . void - href="javascript:void document.... ". -

Answer 2

, :

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/>

onlick .

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

Answer 3

<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/

, , . . , , , .