Using a for loop inside of a for loop

Question

I am writing a code for proboards.com. The code is going to be used to give categorys individual styles.

In the array: catEdit[0] is the category name and catEdit[1] is the id that the user wishes to give that cateory so that they can apply styles to it using CSS.

In the script below I have first looped through the array and then looped through the categorys on the users forum, stated an argument, and based on the argument gave the category an id.

Something is not right. Can someone please tell me what I am doing wrong?

Thank you in advance.

<script type= "text/javascript">
//Individual Category Styles
var catEdit=[
 ["General", "general"],
 ["Tester", "tester"],
 ["New Category", "newcat"]
];
var td= document.getElementsByTagName("td"),i;
 for(i=0; i<catEdit.length;i++){
 for(i=0; i<td.length;i++){
 if(td[i].className== "catbg" && td[i].innerHTML.match(catEdit[i][0])) {
 td[i].id=catEdit[i][1]
 }
 }
 }
</script>

• JohnFx: Expected output? Actual Output? Perhaps you could be more specific about the problem.

Answer 1

You should definitely not use i as the loop variable for both loops. Consider using a different variable for the inner loop.

• nnnnnn: "Probably not"? Definitely not.
• Jesus Ramos: @nnnnnn You never know with people sometimes :P
• nnnnnn: True. But in this case I'm willing to commit to "definitely not". If td.length is less than catEdit.length there'll be an endless loop... If td.length is greater than catEdit.length the code'll crash trying to do catEdit[i][0].

Answer 2

Both of your loops have the same index variable, i, which will not work well at all. Consider using i and j as the index variables for the loops:

for (var i = 0; i < catEdit.length; i++) {
 for (var j = 0; j < td.length; j++) {
 ...

• Shawn GameForreal: OK thanks to everybody who told me to use different index variables. That was the problem. Thanks again!