Script error

[fnsbe]

Hi everybody,

First of all I'm not a java hero but I tried to write my own text editor.
Everything works but only when the existing text need to be re-edited the butttons of my editor seem not to work anymore...

This is the main script :

<!--
  function storeCaret (txtarea) { 
	if (txtarea.createTextRange) { 
	  selectedRange = document.selection.createRange().duplicate();
	  selectedInputArea = txtarea;
	} 
  } 

  function WrapIE(txtarea, lft, rgt) {
	strSelection = document.selection.createRange().text;
	if (strSelection!='') {
	  document.selection.createRange().text = lft + strSelection + rgt;
	  var range = document.selection.createRange();
	  range.collapse(true);
	  range.moveStart('character', lft.length+strSelection.length+rgt.length);
	  range.select();
	  storeCaret(txtarea)
	}
	txtarea.focus();
  }

  function wrapMoz(txtarea, lft, rgt) {
	var selLength = txtarea.textLength;
	var selStart = txtarea.selectionStart;
	var selEnd = txtarea.selectionEnd;
	if (selEnd==1 || selEnd==2) selEnd=selLength;
	var s1 = (txtarea.value).substring(0,selStart);
	var s2 = (txtarea.value).substring(selStart, selEnd)
	var s3 = (txtarea.value).substring(selEnd, selLength);
	txtarea.value = s1 + lft + s2 + rgt + s3;
	txtarea.focus();
	var cPos=s1.length+(lft.length+s2.length+rgt.length);
	txtarea.setSelectionRange(cPos,cPos);
  }
  
  function wrapTag(txtarea, lft, rgt) {
	  lft = unescape(lft);
	  rgt = unescape(rgt);
	if (document.all) {
	  WrapIE(txtarea, lft, rgt);
	}
	else if (document.getElementById) {
	  wrapMoz(txtarea, lft, rgt);
	}
  }

  function wrapWithLink(txtarea) {
	var my_link = prompt('URL:','http://');
	if (my_link != null) {
	  lft='<a href="' + my_link + '">';
	  rgt='</a>';
	  wrapTag(txtarea, lft, rgt);
	}
	return;
  }

  function insertIE (txtarea, text) {
	if (txtarea.createTextRange && selectedRange) { 
	  var caretPos = selectedRange; 
	  caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? text+caretPos.text + ' ' : text+caretPos.text;
	} else {
	  txtarea.value = txtarea.value + text; 
	}
	txtarea.focus();
	return;
  }



  function insertMoz(txtarea , lft) {
	var rgt='';
	wrapTag(txtarea, lft, rgt);
	return;
  }

  function insertTag(txtarea , lft) {
	if (document.all) {
	  insertIE(txtarea, lft);
	}
	else if (document.getElementById) {
	  insertMoz(txtarea, lft);
	}
  }
	
  function insertImage(txtarea) {
	var my_link = prompt('IMG URL:','http://');
	if (my_link != null) {
	  lft='<img src="' + my_link + '" />';
	  insertTag(txtarea, lft);
	}
	return;
  }
function mouseover(el) {
  el.className = 'raise';
}

function mouseout(el) {
  el.className = 'teksteditorImg';
}

function mousedown(el) {
  el.className = 'teksteditorImgPress';
}

function mouseup(el) {
  el.className = 'raise';
}


//-->

This is the editor that works :
[HTML]<table width="100%" border="0" cellpadding="0" cellspacing="0" class="ContentT able_Content_Su bTable">
<tr>
<td><form action="nieuwsM anagement_inhou d.php" method="post" enctype="multip art/form-data" name="form1">
<p>
Tekst :<br>
<img src="../images/bttns/teksteditor/bttn_bold_01.gi f" alt="Vet" width="18" height="18" class="tekstedi torImg" title="Highligh t some text and click for bold" onclick="wrapTa g(this.parentNo de.parentNode.e lements['txt'], '<b>', '</b>');" onmousedown="mo usedown(this);" onmouseup="mous eup(this);" onmouseover="mo useover(this);" onmouseout="mou seout(this);">
<img src="../images/bttns/teksteditor/bttn_italic_01. gif" width="18" height="18" title="Highligh t some text and click for italic" class="tekstedi torImg" onmouseover="mo useover(this);" onmouseout="mou seout(this);" onmousedown="mo usedown(this);" onmouseup="mous eup(this);" onclick="wrapTa g(this.parentNo de.parentNode.e lements['txt'], '<i>', '</i>')">
<img src="../images/bttns/teksteditor/bttn_underlined _01.gif" width="18" height="18" title="Highligh t some text and click for underlined" class="tekstedi torImg" onmouseover="mo useover(this);" onmouseout="mou seout(this);" onmousedown="mo usedown(this);" onmouseup="mous eup(this);" onclick="wrapTa g(this.parentNo de.parentNode.e lements['txt'], '<u>', '</u>')">
<img src="../images/bttns/teksteditor/bttn_alignCente r_01.gif" width="18" height="18" title="Highligh t some text and click to center" class="tekstedi torImg" onmouseover="mo useover(this);" onmouseout="mou seout(this);" onmousedown="mo usedown(this);" onmouseup="mous eup(this);" onclick="wrapTa g(this.parentNo de.parentNode.e lements['txt'], '<div align=%22center %22>', '</div>')">
<img src="../images/bttns/teksteditor/bttn_alignRight _01.gif" width="18" height="18" title="Highligh t some text and click to right align" class="tekstedi torImg" onmouseover="mo useover(this);" onmouseout="mou seout(this);" onmousedown="mo usedown(this);" onmouseup="mous eup(this);" onclick="wrapTa g(this.parentNo de.parentNode.e lements['txt'], '<div align=%22right% 22>', '</div>')">
<img src="../images/bttns/teksteditor/bttn_blockQuote _01.gif" width="18" height="18" title="Highligh t some text and click for a blockquote" class="tekstedi torImg" onmouseover="mo useover(this);" onmouseout="mou seout(this);" onmousedown="mo usedown(this);" onmouseup="mous eup(this);" onclick="wrapTa g(this.parentNo de.parentNode.e lements['txt'], '<blockquote>' , '</blockquote>')">
<img src="../images/bttns/teksteditor/bttn_list_01.gi f" width="18" height="18" title="Highligh t some text and click for a bulleted list" class="tekstedi torImg" onmouseover="mo useover(this);" onmouseout="mou seout(this);" onmousedown="mo usedown(this);" onmouseup="mous eup(this);" onclick="wrapTa g(this.parentNo de.parentNode.e lements['txt'], '<li>', '</li>')">
<img src="../images/bttns/teksteditor/bttn_horizRule_ 01.gif" width="18" height="18" title="Insert a horizontal rule" class="tekstedi torImg" onmouseover="mo useover(this);" onmouseout="mou seout(this);" onmousedown="mo usedown(this);" onmouseup="mous eup(this);" onclick="insert Tag(this.parent Node.parentNode .elements['txt'],'<hr />');">
<img src="../images/bttns/teksteditor/bttn_link_01.gi f" width="18" height="18" title="Highligh t some text and click to add a link" class="tekstedi torImg" onmouseover="mo useover(this);" onmouseout="mou seout(this);" onmousedown="mo usedown(this);" onmouseup="mous eup(this);" onclick="wrapWi thLink(this.par entNode.parentN ode.elements['txt']);">

<textarea wrap="soft" name="txt" cols="85" rows="10" class="formfiel d" id="txt" onSelect="store Caret(this);" onClick="storeC aret(this);" onKeyUp="storeC aret(this);"></textarea>
</p>
<p align="center">
<input name="new" type="hidden" value="active"> <input name="m" type="hidden" value="<?php echo $m?>"><input name="s" type="hidden" value="<?php echo $s?>"><input name="imageFiel d" type="image" src="../images/bttns/bttn_OK_70x20_0 1.jpg" width="70" height="20" border="0">
</p>
</form></td>
</tr>
</table>
[/HTML]

The Error part follows in the next window...

[fnsbe]

Now... The user sends this text into a database. When he wants to edit the existing text he clicks a button and a layer, that was hidden, appears. The layer shows the same kind of editor with the existing text in it.
Everything works... but my java buttons don't...

This is the layer with the editor that doesn't work properly :

<div id="edittekst<?php echo $paragr['artikel_id']?>" style="position:absolute; width:400px; height:100px; z-index:4; visibility: hidden; left:300px;" class="layer">
  <table width="400" border="0" cellspacing="0" cellpadding="0">
	<tr>
	  <td width="394" class="layer_TableHeader">Wijzig de tekst </td>
	  <td class="layer_TableHeader" style="margin-left:0px;"><div align="center"><a href="#"><img src="../images/bttns/bttn_closeLayer_01.jpg" alt="Sluiten" width="30" height="30" border="0" onClick="MM_showHideLayers('edittekst<?php echo $paragr['artikel_id']?>','','hide')"></a></div></td>
	</tr>
	<tr>
	  <td colspan="2" class="layer_TableContent"><form action="nieuwsManagement_inhoud.php" method="post" enctype="multipart/form-data" name="form<?php echo $submenus['submenu_id']?>b">
		&nbsp;<br>
		<table width="380" border="0" cellpadding="0" cellspacing="0" class="ContentTable_Content_SubTable">
		  <tr>
			<td>Wijzig Titel</td>
			<td>: 
			<input name="titel" type="text" class="formfield" value="<?php echo $paragr['titel']?>" size="40" maxlength="60"></td>
		  </tr>
		  <tr>
			<td colspan="2">Wijzig de tekst :<br>
			 <img src="../images/bttns/teksteditor/bttn_bold_01.gif" alt="Vet" width="18" height="18" class="teksteditorImg" title="Highlight some text and click for bold"  onmousedown="mousedown(this);" onmouseup="mouseup(this);"  onmouseover="mouseover(this);" onmouseout="mouseout(this);"  onclick="wrapTag(this.parentNode.parentNode.elements['txtnew'], '<b>', '</b>');">
			 <img src="../images/bttns/teksteditor/bttn_italic_01.gif" width="18" height="18"  title="Highlight some text and click for italic" class="teksteditorImg"  onmouseover="mouseover(this);" onmouseout="mouseout(this);"  onmousedown="mousedown(this);" onmouseup="mouseup(this);"  onclick="wrapTag(this.parentNode.parentNode.elements['txtnew'], '<i>', '</i>')">
			 <img src="../images/bttns/teksteditor/bttn_underlined_01.gif" width="18" height="18"  title="Highlight some text and click for underlined" class="teksteditorImg"  onmouseover="mouseover(this);" onmouseout="mouseout(this);"  onmousedown="mousedown(this);" onmouseup="mouseup(this);"  onclick="wrapTag(this.parentNode.parentNode.elements['txtnew'], '<u>', '</u>')">
			 <img src="../images/bttns/teksteditor/bttn_alignCenter_01.gif" width="18" height="18"  title="Highlight some text and click to center" class="teksteditorImg"  onmouseover="mouseover(this);" onmouseout="mouseout(this);"  onmousedown="mousedown(this);" onmouseup="mouseup(this);"  onclick="wrapTag(this.parentNode.parentNode.elements['txtnew'], '<div align=%22center%22>', '</div>')">
			 <img src="../images/bttns/teksteditor/bttn_alignRight_01.gif" width="18" height="18"  title="Highlight some text and click to right align" class="teksteditorImg"  onmouseover="mouseover(this);" onmouseout="mouseout(this);"  onmousedown="mousedown(this);" onmouseup="mouseup(this);"  onclick="wrapTag(this.parentNode.parentNode.elements['txtnew'], '<div align=%22right%22>', '</div>')">
			 <img src="../images/bttns/teksteditor/bttn_blockQuote_01.gif" width="18" height="18"  title="Highlight some text and click for a blockquote" class="teksteditorImg"  onmouseover="mouseover(this);" onmouseout="mouseout(this);"  onmousedown="mousedown(this);" onmouseup="mouseup(this);"  onclick="wrapTag(this.parentNode.parentNode.elements['txtnew'], '<blockquote>', '</blockquote>')">
			 <img src="../images/bttns/teksteditor/bttn_list_01.gif" width="18" height="18"  title="Highlight some text and click for a bulleted list"  class="teksteditorImg" onmouseover="mouseover(this);"  onmouseout="mouseout(this);" onmousedown="mousedown(this);"  onmouseup="mouseup(this);"  onclick="wrapTag(this.parentNode.parentNode.elements['txtnew'], '<li>', '</li>')">
			 <img src="../images/bttns/teksteditor/bttn_horizRule_01.gif" width="18" height="18"  title="Insert a horizontal rule" class="teksteditorImg"  onmouseover="mouseover(this);" onmouseout="mouseout(this);"  onmousedown="mousedown(this);" onmouseup="mouseup(this);"  onclick="insertTag(this.parentNode.parentNode.elements['txtnew'],'<hr />');">
			 <img src="../images/bttns/teksteditor/bttn_link_01.gif" width="18" height="18"  title="Highlight some text and click to add a link" class="teksteditorImg"  onmouseover="mouseover(this);" onmouseout="mouseout(this);"  onmousedown="mousedown(this);" onmouseup="mouseup(this);"  onclick="wrapWithLink(this.parentNode.parentNode.elements['txtnew']);">

			<textarea wrap="soft" name="txtnew" cols="85" rows="15" class="formfield" id="txtnew"  onSelect="storeCaret(this);" onClick="storeCaret(this);" onKeyUp="storeCaret(this);"><?php echo $paragr['tekst']?></textarea></td>
		  </tr>
		  <tr>
			<td width="74"><div align="center">
			  </div></td>
			<td width="304"><input name="m" type="hidden" value="<?php echo $m?>">
			  <input name="s" type="hidden" value="<?php echo $s?>">
			  <input name="wijzig_tekst" type="hidden" id="wijzig_tekst" value="<?php echo $paragr['artikel_id']?>">
			   &nbsp;
			   <input name="imageField" type="image" src="../images/bttns/bttn_OK_70x20_01.jpg" width="70" height="20" border="0">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </td>
		  </tr>
		</table>
		<br>&nbsp;
	  </form></td>
	</tr>
  </table>
</div>

I hope somebody can help me...


Thanks in advance.

Regads,
Erwin

[UniDyne]

First off, I think this is in the wrong forum. This is JavaScript, not Java - there is a HUGE difference.

But, here is an answer anyway:

In the editor that works, this.parentNode .parentNode refers to the form tag - which is the parent of the textarea named "txt". This code works.

The problem is in the other half of your code. Here, this.parentNode .parentNode refers to the tr element - which is NOT the parent of the textarea named "newtxt".

You would do better to use document.getEle mentByID(), since your textareas use the id attribute. This would keep you from having to crawl up the DOM tree to find your textarea.