Forum Moderators: open
function showmenu(SectionName) {
TabName = SectionName + "Tab";
TabContainer = document.getElementById('ProductTabs');
TabArray = TabContainer.getElementsByTagName('a');
NumInArray = TabArray.length;
for (i=0; i < NumInArray; i++) {
document.write(TabArray[i].id);
document.write(" i=" + i);
}
document.write("<br>done");
}
For reference below, line 7 is document.write(TabArray[i].id);
When I run this on the page, it pulls 3 elements in to the Array (which is correct). I declare NumInArray because if I just use TabArray.length in the for loop, it will only cycle once regardless of whether line 7 is in or not. The output that I get from this function is
PhotosTab i=0 i=0 i=1 i=2
doneAny idea why line 7 kills the script?
Here is a complete page that I think should do everything:
<html>
<body><script type="text/javascript">
function showmenu(SectionName) {
TabName = SectionName + "Tab";
TabContainer = document.getElementById('ProductTabs');
TabArray = TabContainer.getElementsByTagName('a');
NumInArray = TabArray.length;
for (i=0; i < NumInArray; i++) {
document.write(TabArray[i].id);
document.write(" i=" + i);
}
document.write("<br>done");
}
</script>
<div id="ProductTabs">
<table width="300" border="3" cellspacing="0">
<tr>
<td align="center" class="chosentab"><a id="PhotosTab" href="javascript:void(null)" onclick="showmenu('Photos')">Photos</a></td>
<td align="center" class="nonchosentab"><a id="CardsTab" href="javascript:void(null)" onclick="showmenu('Cards')">Cards & More</td>
<td align="center" class="nonchosentab"><a id="MerchandiseTab" href="javascript:void(null)" onclick="showmenu('Merchandise')">Merchandise</td>
</tr>
</table>
</div>
</body>
</html>
change
for (i=0; i < NumInArray; i++) {
document.write(TabArray[i].id);
document.write(" i=" + i);
}
document.write("<br>done");
}
to
var S = "";
for (var i=0; i < NumInArray; i++) {
S += TabArray[i].id + " i=" + i + "<br>done";
}
documment.getElementById("menu").innerHTML = S;
in HTML where menu is required add
<div id="menu"></div>
What I was actually trying to do was change a classname of an item, but when that wasn't working, I changed my commands to the document.write so that I could see what it was doing and what the different variables contained. I got most of the bugs worked out of it that way, but never tried going back to what I was actually wanting to have done. When you said "Document.write is a crude tool", I figured that I must have fixed my problems without realizing it and so I went back and changed the document.write lines back to what I wanted, and it does work. So your response solved the problem - just not in the way you would expect. I will keep your response in mind for the future when I am trying to do that.
Thanks again!
FYI for anyone reading or having a problem, here's the code that I ended up using:
function showmenu(SectionName) {
TabName = SectionName + "Tab";
TabContainer = document.getElementById('ProductTabs');
TabArray = TabContainer.getElementsByTagName('td');
NumInArray = TabArray.length;
for (i=0; i < NumInArray; i++) {
if (TabName == TabArray[i].id) {
TabArray[i].className = "chosentab";
}
else {
TabArray[i].className = "nonchosentab";
}
}
}
