PDA

View Full Version : document.getElementById

ZHSHQZYC
10-18-2007, 09:05 PM
Hello, I am going to retrieve the elements's id from an array. How to do it?
Normally, if we known the id we can use the statement.

<script type="text/javascript">
function atart()
{
var two = windows.document.getElementById("two");
....
}
</script>

However, my case has hundreds of elements, each of them has a different id.
It is impractical to enumerate hundrends of statements like
var two = windows.document.getElementById("two");

How to implement with a loop?
BonRouge
10-18-2007, 09:53 PM
Can you expand a little? I'm not exactly sure what you're trying to do...
ZHSHQZYC
10-18-2007, 10:10 PM
Long story shortly.

Could you please see
http://www.codeguru.com/forum/showthread.php?t=436754

The who story therein. I need help.

Appreciate
BonRouge
10-18-2007, 10:26 PM
If I understand this right, you'd have been better doing that with classes. Maybe there's I reason that I can't see for you needing an id for each paragraph - I guess there must be - but as far as the colours go, you'd be better giving each of the paragraphs a class - e.g. 'ten', 'thirty'. Then you're CSS will be a lot simpler.

Again, I'm not sure if I've understood correctly, but I think you want all of the black ones to be hidden when you press the 'show the red ones' button. Is that right?

You can do that by checking the class of each element. If the class is 'thirty' (I'm guessing those are the black ones) you can hide each element.

Let me know if I've understood the situation and you think I'm on the right lines. Then I could write a quick demo...
BillyGalbreath
10-18-2007, 11:05 PM
I'm not entirely sure what you're trying to do as well...

But here's what you asked for.

http://houston.pl3x.net/billy/tests/zhshqzyc.html

Instead of naming your elements like "one" "two" "three" - instead name them like this "p0" "p1" "p2" - this will make dealing with them in loops easier.

;)
ZHSHQZYC
10-19-2007, 08:49 AM
Again, I'm not sure if I've understood correctly, but I think you want all of the black ones to be hidden when you press the 'show the red ones' button. Is that right?


Yes, that is my expected. BUT I still no idea ti handle it.

Thanks for your help.
Could you please provide me a piece of codes?
BonRouge
10-19-2007, 11:01 AM
See if this helps:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Quick example</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
background:#fff;
}
p {
margin:1em;
}
.ten {
color:red;
}
.thirty {
color:black;
}
</style>
<script type="text/javascript">
function hide(which) {
var cNodes=document.body.childNodes;
if (which!="first") {
for (i=0; i<cNodes.length; i++) {
if(cNodes[i].className=='ten') {
cNodes[i].style.display=((which=='ten' || which=='all')? 'block': 'none');
}
else if(cNodes[i].className=='thirty') {
cNodes[i].style.display=((which=='thirty' || which=='all')? 'block': 'none');
}
}
}
}
window.onload=function() {
hide('first');
document.getElementById('ten').onclick=function() {hide('ten');}
document.getElementById('thirty').onclick=function() {hide('thirty');}
document.getElementById('all').onclick=function() {hide('all');}
}
</script>
</head>
<body>
<button id="ten">ten</button><button id="thirty">thirty</button><button id="all">show all</button>
<p class="ten">1 this has the class 'ten'</p>
<p class="thirty">2 this has the class 'thirty'</p>
<p class="ten">3 this has the class 'ten'</p>
<p class="thirty">4 this has the class 'thirty'</p>
<p class="ten">5 this has the class 'ten'</p>
<p class="ten">6 this has the class 'ten'</p>
<p class="thirty">7 this has the class 'thirty'</p>
<p class="thirty">8 this has the class 'thirty'</p>
<p class="thirty">9 this has the class 'thirty'</p>
<p class="thirty">10this has the class 'thirty'</p>
<p class="ten">11 this has the class 'ten'</p>
</body>
</html>
ZHSHQZYC
10-19-2007, 11:29 AM
I believe it works. But I have hundreds of case.
Do I enumate all case?

<p class="ten">
.......
<p class="hundred">
BonRouge
10-19-2007, 11:48 AM
You mean you don't just have 'ten' and 'thirty'? You're going to 100 different colours for a hundred different cases?