slimy
10-17-2002, 04:08 AM
I have a <h1> tag with an ID of "head1".
I have a form with 2 items:
A box you type your text in, and a button to call the addText() function. The addText() function takes the user's input text, and creates a text node out of it. It then adds the new text node to the header tag. It also updates the window status to display the number of text nodes within the "head1" tag. Naturally, every time you press the button, the number should increment.
The problem I'm running into is that the for...in lopp that I'm using doen't seem to traverse the full array of child nodes of the header tag. In the code below, I have two for loops. A "traditional" for, and a for...in. Both should do the same thing, but I find that only the traditional loop does the predictable thing. The for..in loop stops counting at 2.
Anyone know what's wrong, or even if this code works in other browsers? This is in Mozilla 1.1, by the way.
<html>
<head>
<script language="javascript" type="text/javascript">
function addText()
{
var newNode = document.createTextNode(document.form1.newheader.value);
document.getElementById("head1").appendChild(newNode);
var childList = document.getElementById("head1").childNodes;
var ctr = 0;
for(i in childList)
// for(i=0; i < childList.length; i++)
{
ctr++;
}
window.status = ctr;
}
</script>
</head>
<body>
<h1 id="head1">Visible Example 1:</h1>
</p>
<form name="form1">
<input type="text" name="newheader" value="change me!" size="40">
<input type="button" value="Change Text" onClick="addText()";>
</form>
</p>
</body>
</html>
I have a form with 2 items:
A box you type your text in, and a button to call the addText() function. The addText() function takes the user's input text, and creates a text node out of it. It then adds the new text node to the header tag. It also updates the window status to display the number of text nodes within the "head1" tag. Naturally, every time you press the button, the number should increment.
The problem I'm running into is that the for...in lopp that I'm using doen't seem to traverse the full array of child nodes of the header tag. In the code below, I have two for loops. A "traditional" for, and a for...in. Both should do the same thing, but I find that only the traditional loop does the predictable thing. The for..in loop stops counting at 2.
Anyone know what's wrong, or even if this code works in other browsers? This is in Mozilla 1.1, by the way.
<html>
<head>
<script language="javascript" type="text/javascript">
function addText()
{
var newNode = document.createTextNode(document.form1.newheader.value);
document.getElementById("head1").appendChild(newNode);
var childList = document.getElementById("head1").childNodes;
var ctr = 0;
for(i in childList)
// for(i=0; i < childList.length; i++)
{
ctr++;
}
window.status = ctr;
}
</script>
</head>
<body>
<h1 id="head1">Visible Example 1:</h1>
</p>
<form name="form1">
<input type="text" name="newheader" value="change me!" size="40">
<input type="button" value="Change Text" onClick="addText()";>
</form>
</p>
</body>
</html>