Javascript/DOM & Loops

Original Message

Name: mie2com
Date: August 3, 2007 at 14:59:35 Pacific
Subject: Javascript/DOM & Loops
OS: XP
CPU/Ram: pentium 4
Model/Manufacturer: dell

Comment:

Hi everyone. I need help.
Here's example of html & css;
[style]
.item_id {
visibility:hidden;
}
[/style]
[html]
...
[div id="ITEM_ID-A001" class="item_id"]...[/div]
[div id="ITEM_ID-A002" class="item_id"]...[/div]
...
[div id="ITEM_ID-A009" class="item_id"]...[/div]
...
[/html]
The problem is, if i wrote JS exactly like this:
document.getElementById("ITEM_ID-A001").style.visibility = "visible";
document.getElementById("ITEM_ID-A002").style.visibility = "visible";
...
document.getElementById("ITEM_ID-A009").style.visibility = "visible";
ALL [div] will become visible.
However, when i try to loop like this:
i = 0
while (i <= 9)
{
document.getElementById("ITEM_ID-A00" + i).style.visibility = "visible";
i++
}
ALL [div] still remain hidden.
If i have 999 items, it would take 999 lines to make it visible if i don't loop.
I need help on this. Thanks in advance.

Report Offensive Message For Removal

Response Number 1

Name: Michael J (by mjdamato)
Date: August 3, 2007 at 19:12:31 Pacific
Subject: Javascript/DOM & Loops

Reply: (edit)

Well, that works for me just fine. Are you sure you don't have a typo or other problem with the code? By the way, I would suggest creating another class for the "visible" elements and changing the class of the divs. Just a thought.
Anyway, here is the test code I tried that worked:
<html>
<head>
<style>
.item_id {
visibility:hidden;
}
</style>
<script>
function runCode() {
document.getElementById("ITEM_ID-A001").style.visibility = "visible";
var i = 2;
while (i<=4) {
document.getElementById("ITEM_ID-A00"+i).style.visibility = "visible";
i++;
}
}
</script>
</head>
<body>
<div id="ITEM_ID-A001" class="item_id">1</div>
<div id="ITEM_ID-A002" class="item_id">2</div>
<div id="ITEM_ID-A003" class="item_id">3</div>
<div id="ITEM_ID-A004" class="item_id">4</div>
<button onclick="runCode()">Click</button>
</body>
</html>
Michael J

Report Offensive Follow Up For Removal

Response Number 2

Name: mie2com
Date: August 4, 2007 at 01:53:13 Pacific
Subject: Javascript/DOM & Loops

Reply: (edit)

thanks MichaelJ. after studying your example, it works when I declare var i = 1. that's strange, i wonder why it didn't work when i declare var i = 0.

Report Offensive Follow Up For Removal

Response Number 3

Name: Michael J (by mjdamato)
Date: August 4, 2007 at 12:38:18 Pacific
Subject: Javascript/DOM & Loops

Reply: (edit)

Well, that would because the first time through the loop it would be trying to reference the object with the ID 'A000'. And since that object does not exist you get the error. If you would have looked at the error message it should have told you that(double click the error icon in the bottom left of the browser window).
Michael J

Report Offensive Follow Up For Removal


Javascript/DOM change row color Javascript DOM Tutorial Hide the bottom frame with a button JavaScript help please! Javascript Question	Javascript: How To.. Javascript xhtml markup editor Confict using two JavaScript tools javascript problems in netscape/moz Help! Deadline! - JavaScript var&td