innerHtml with form elements Problem??

[bicare]

when i use innerHtml to add form elements, it causes some problems like ..hm.. the form elements are always created and destroyed immediately. I havent solved it, please help.

<script type="text/javascript">
<!--
function showtext(what){
document.getElementById('text').innerHTML="<input type='password' name='pass'>";
}
function hidetext(what){
document.getElementById('text').innerHTML="Login";
}
//-->
</script>

<div id='text' onMouseOver="showtext();" onMouseOut="hidetext();">Login</div>

[bicare]

Is there someone that may help me?

[markle976]

The problem has to do with event bubbling. As soon as you mouseOver the text and it is replaced with an input element it triggers the mouseOut event. Unfortunately, you will not get very far using inline event triggers.

You should either A) Learn more about cross-browser event binding. B) Use jQuery. Or, C) try a different approach such as a button that shows/hides your login form.

I am not trying to be rude; hopefully this information saves you some frustration.

I wish you luck. May the source be with you

[DanInMA]

it would be easier to hide the form and show it. you should really only use innerHTML for altering plain text, not appending new elements. - this is a good place to start - http://www.javascriptkit.com/javatutors/dom2.shtml

[bicare]

I just want to replace the text with input element. but I thank to you markle976 and DanInMA for your replies.