[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