U
User Access Approved
I am having a bit of trouble with code that toggles a SPAN element (with
id="sourcetype") between two content nodes. The toggle is determined by
radio type INPUT controls, whose ONCHANGE event is supposed to call a
function that sets the content of the SPAN element. The one content node
is a simple Text node, while the other is actually a Document Fragment
node.
When the radio button "ESI+" is set (checked true), the SPAN element
content is supposed to be "ESI+". When the button is set "ESI-", the
SPAN element is supposed to be set to contain "ESI\u2212"
Errors occur at the replaceChild() method call, from what I can tell.
When I changed the initialization script at the bottom of the document
BODY, so that variable 'ESInegTxtNode' was created through
document.createTextNode('ESI' + minus_char), the browsers did not give
the errors I was getting before.
Thus, the replaceChild() method could not take the Document Fragment
node, but could take a Text node. That does not seem right to me, since
any Node type is an acceptable parameter.
===================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>QToF Interactive Guide</title>
<style type="text/css">
@media print { body { font-size:12pt; }
table, tr { border:2px solid silver;} }
@media screen {
body { background-color:#f8fff8; margin:2em 10%;line-height:1.2em;
}
}
table { margin:1em 0; background-color:#aaa; }
th, td { padding:0.1em 0.25em;}
th { background-color:#ffe8e8;font:bold 90% Helvetica,Arial,sans-
serif;}
td { background-color:#e8e8ff;font:normal 100% Helvetica,Arial,sans-
serif; }
#title {text-align:center;font:bold 150% Tahoma,Arial,sans-serif;color:
#aa3377;}
</style>
<script type="text/javascript">
var browser = "";
if (document.all)
browser = "ie";
// CONSTANTS in Unicode
var minus_char = "\u2212";
function sourceChanged(radioButton)
{
var t = document.getElementById("sourcetype");
if (radioButton.value == "ESI-" && radioButton.checked == true)
ESIposTxtNod = t.replaceChild(ESInegTxtNod, ESIposTxtNod);
else if (radioButton.value == "ESI+" && radioButton.checked == true)
ESInegTxtNod = t.replaceChild(ESIposTxtNod, ESInegTxtNod);
}
/* if (browser == "ie")
t.innerHTML = "ESI+";
else
if (browser = "ie")
t.innerHTML = "ESI" + minus_char;
else */
</script>
</head>
<body>
<p id="title">
QToF Interactive Guide
<p>
<table>
<tr><td class="tdradio">
<input type="radio" name="ESIset" value="ESI+" checked
onchange="sourceChanged(this);">positive source (ESI+)
<br><input type="radio" name="ESIset" value="ESI-"
onchange="sourceChanged(this);">negative source (ESI&minus
<tr><td><span id="sourcetype"></span>
</table>
<script type="text/javascript">
var ESInegTxtNod = document.createDocumentFragment();
var ESIposTxtNod = document.createTextNode("ESI+");
ESInegTxtNod.appendChild(document.createTextNode("ESI" +
minus_char));
document.getElementById("sourcetype").appendChild(ESIposTxtNod);
</script>
</body>
</html>
id="sourcetype") between two content nodes. The toggle is determined by
radio type INPUT controls, whose ONCHANGE event is supposed to call a
function that sets the content of the SPAN element. The one content node
is a simple Text node, while the other is actually a Document Fragment
node.
When the radio button "ESI+" is set (checked true), the SPAN element
content is supposed to be "ESI+". When the button is set "ESI-", the
SPAN element is supposed to be set to contain "ESI\u2212"
Errors occur at the replaceChild() method call, from what I can tell.
When I changed the initialization script at the bottom of the document
BODY, so that variable 'ESInegTxtNode' was created through
document.createTextNode('ESI' + minus_char), the browsers did not give
the errors I was getting before.
Thus, the replaceChild() method could not take the Document Fragment
node, but could take a Text node. That does not seem right to me, since
any Node type is an acceptable parameter.
===================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>QToF Interactive Guide</title>
<style type="text/css">
@media print { body { font-size:12pt; }
table, tr { border:2px solid silver;} }
@media screen {
body { background-color:#f8fff8; margin:2em 10%;line-height:1.2em;
}
}
table { margin:1em 0; background-color:#aaa; }
th, td { padding:0.1em 0.25em;}
th { background-color:#ffe8e8;font:bold 90% Helvetica,Arial,sans-
serif;}
td { background-color:#e8e8ff;font:normal 100% Helvetica,Arial,sans-
serif; }
#title {text-align:center;font:bold 150% Tahoma,Arial,sans-serif;color:
#aa3377;}
</style>
<script type="text/javascript">
var browser = "";
if (document.all)
browser = "ie";
// CONSTANTS in Unicode
var minus_char = "\u2212";
function sourceChanged(radioButton)
{
var t = document.getElementById("sourcetype");
if (radioButton.value == "ESI-" && radioButton.checked == true)
ESIposTxtNod = t.replaceChild(ESInegTxtNod, ESIposTxtNod);
else if (radioButton.value == "ESI+" && radioButton.checked == true)
ESInegTxtNod = t.replaceChild(ESIposTxtNod, ESInegTxtNod);
}
/* if (browser == "ie")
t.innerHTML = "ESI+";
else
if (browser = "ie")
t.innerHTML = "ESI" + minus_char;
else */
</script>
</head>
<body>
<p id="title">
QToF Interactive Guide
<p>
<table>
<tr><td class="tdradio">
<input type="radio" name="ESIset" value="ESI+" checked
onchange="sourceChanged(this);">positive source (ESI+)
<br><input type="radio" name="ESIset" value="ESI-"
onchange="sourceChanged(this);">negative source (ESI&minus
<tr><td><span id="sourcetype"></span>
</table>
<script type="text/javascript">
var ESInegTxtNod = document.createDocumentFragment();
var ESIposTxtNod = document.createTextNode("ESI+");
ESInegTxtNod.appendChild(document.createTextNode("ESI" +
minus_char));
document.getElementById("sourcetype").appendChild(ESIposTxtNod);
</script>
</body>
</html>