[thelist] appendChild() exception

Hassan Schroeder hassan at webtuitive.com
Fri Oct 24 11:38:31 CDT 2003

joe wrote:

> I'm trying to append or replace a text node:
> <code>
> <input type="checkbox" "id="qsfcontrol" onClick="toggle(this)" />Tick 
> the box to ignore these search criteria
> </code>
> if I understand you correctly, the text "Tick the box to ignore these 
> search criteria" is not a child of 'qsfcontrol' which would explain why 
> when I originally tried replaceChild(), nothing at all happened, no 
> errors, nothing.  Is it then a sibling?


> checking the box disables part of the form (nice idea I got from Nelson 
> in an earlier thread) and I want to toggle the text next to the box. the 
> form isn't in a table, so the box and the text aren't separable by <td>, 
> so I'm wondering what is the semantically correct way to structure the 
> message next to the text box.

Well, properly, that text should be in a LABEL tag. That slightly
complicates the JavaScript, since either the checkbox or the label
can be clicked to activate your function, but -- here's an example:

<script type="text/javascript">
var myMessage = "click this";
function toggle(ev)
   var originator = (document.all)? window.event.srcElement : ev.target;
   myMessage = (myMessage == "click this")? "stop, already" : "click this";
   if ( originator.nodeName == "INPUT" )
     originator.nextSibling.firstChild.nodeValue = myMessage;
   if ( originator.nodeName == "LABEL" )
     originator.firstChild.nodeValue = myMessage;
function init()
   qfscontrol = document.getElementById("qfscontrol");
   qfscontrol.onclick = toggle;
window.onload = init;
<form method="get" action="/process">
       id="qfscontrol"/><label for="qfscontrol">click this</label>

Note: if for whatever reason you can't be sure that <input/><label>
will be immediately adjacent, without *any* space, you need to add
a test that nextSibling is not a text node; probably good practice
in any case...

Holler if any of the above doesn't make sense :-)
Hassan Schroeder ----------------------------- hassan at webtuitive.com
Webtuitive Design ===  (+1) 408-938-0567   === http://webtuitive.com

                           dream.  code.

More information about the thelist mailing list