[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?

Yes.

> 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;
</script>
</head>
<body>
<form method="get" action="/process">
<fieldset>
   <input
       type="checkbox"
       value="foo"
       id="qfscontrol"/><label for="qfscontrol">click this</label>
</fieldset>
</form>
-------------------------------------------------------------------

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