Forgive me if what I am about to ask is either impossible or too much of a noob question.

I have coded a rather basic form which includes a textarea. within that form I added some links with javascript function calls. the script itself is supposed to insert text in the textarea ( example you click on "B", and "< b > </ b> " appears within the text area).

All of this is working fine actually, except in Firefox. In FF, the script will output to the textarea just fine, until the user enters any text into that text area. After that the script seems to beak at :

var message=document.getElementById(target).form.articles.value;

and thus doesnt output anything to the form.

The whole script is as follows:
function addBbCode(code, target){
if (code!='a' && code!='img' && code!='h'){ tags=' ['+code+'][/'+code+']';}
if (code=='a'){ tags=' ['+code+' href="#"][/'+code+']';}
if (code=='img'){ tags=' ['+code+' #]';}
var message=document.getElementById(target).form.articles.value;
if (code=='h'){
if (message!=""){tags='\n\n['+code+'][/'+code+']';}
else{tags='['+code+'][/'+code+']';}
}
document.getElementById(target).textContent=message +tags;
if (navigator.appName=="Microsoft Internet Explorer"){document.getElementById(target).innerText=message +tags;}
}



and the HTML and activation is generally like this:

<form id="formname" action="" method="get" name="target" '>
<fieldset id="placement"> some other stuff...</fieldset>
<fieldset id="data">
<p><label for="Article">Article</label><textarea name="articles" rows="20" id="target">aa</textarea></p>
<p id="styling">
<a href="javascript:void(addBbCode('b', 'target'))">b</a>|
<a href="javascript:void(addBbCode('i', 'target'))">i</a> |
<a href="javascript:void(addBbCode('u', 'target'))">u</a>|
<a href="javascript:void(addBbCode('a', 'target'))">a</a>|
<a href="javascript:void(addBbCode('img', 'target'))">img</a>|
<a href="javascript:void(addBbCode('h', 'target'))">h</a>
</p>
</fieldset>
</form>


Any help would be greatly appreciated...