469,616 Members | 1,674 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,616 developers. It's quick & easy.

getElementById in a for loop whose target div id is being looped in that for loop.

Nik
Hello! Thanks for reading my question first!

I have many divs with an numeral id ,for example <div
id="999">...</div>, <div id="1000">...</div>

and I wish to do something like this,

for( var i = startvalue; i<=endvalue; i++){
document.getElementById(i).style.background="yello w;";
}

but after the first changing background, it stops and tell me that the
document.getElementById(i) has no properties. And I am sure that those
div's exist.

What's going wrong?

Thanks So Much!

Dec 15 '06 #1
10 9869
Nik said the following on 12/15/2006 12:08 AM:
Hello! Thanks for reading my question first!
What makes you think I read it "first" and not "second"?
I have many divs with an numeral id ,for example <div
id="999">...</div>, <div id="1000">...</div>

and I wish to do something like this,

for( var i = startvalue; i<=endvalue; i++){
document.getElementById(i).style.background="yello w;";
}

but after the first changing background, it stops and tell me that the
document.getElementById(i) has no properties. And I am sure that those
div's exist.

What's going wrong?
Something in your code isn't working? Show a sample page with a minimal
example of the behavior. Either your endvalue is wrong (depending on how
you set it) or the id doesn't exist.

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Dec 15 '06 #2
Nik
Hey Randy! Thanks for coming to rescue.

Unfortunately(really!) All the div's are pulled from a database with my
company's password.... BUT I have tried changing the
document.getElementById(i).style.background='yello w;'; to alert(i);

And that works - I pushed (endvalue - startvalue) times of OK myself.
But why doesn't the getElementById(i) work, this is very, very strange
to me, I am sensing something real stupid, but I cannot figure that out
myself...

any thoughts?

Quintillion Thank You's
Randy Webb wrote:
Nik said the following on 12/15/2006 12:08 AM:
Hello! Thanks for reading my question first!

What makes you think I read it "first" and not "second"?
I have many divs with an numeral id ,for example <div
id="999">...</div>, <div id="1000">...</div>

and I wish to do something like this,

for( var i = startvalue; i<=endvalue; i++){
document.getElementById(i).style.background="yello w;";
}

but after the first changing background, it stops and tell me that the
document.getElementById(i) has no properties. And I am sure that those
div's exist.

What's going wrong?

Something in your code isn't working? Show a sample page with a minimal
example of the behavior. Either your endvalue is wrong (depending on how
you set it) or the id doesn't exist.

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Dec 15 '06 #3
Nik wrote:
Hello! Thanks for reading my question first!

I have many divs with an numeral id ,for example <div
id="999">...</div>, <div id="1000">...</div>
For valid HTML, the value of the id attribute must not start with a
digit, though it can contain digits.
>
and I wish to do something like this,

for( var i = startvalue; i<=endvalue; i++){
document.getElementById(i).style.background="yello w;";
}

but after the first changing background, it stops and tell me that the
document.getElementById(i) has no properties. And I am sure that those
div's exist.

What's going wrong?
Who knows? Your code as posted should work. To fix the invalid ids,
just prefix the values with one or more letters, e.g.:

<script type="text/javascript">

function foo(startvalue, endvalue){
for( var i=startvalue; i<=endvalue; i++){
document.getElementById('x' + i).style.background="yellow;";
}
}

</script>
<input type="button" value="call foo(1,2)" onclick="foo(1,2);">
<div id="x0">x0</div>
<div id="x1">x1</div>
<div id="x2">x2</div>
<div id="x3">x3</div>
--
Rob

Dec 15 '06 #4
Nik
Hey Rob, Thank You, too, for your response!

I tried your suggestion, but it failed, too. Thank You nonetheless,
time and thought and everything. Just in case you still have the
slightest interest in this seemingly trivial problem, I tried in the
loop alert(i); instead of
document.getElementById(i).style.background='yello w;';, and that
worked! I had to press OK for.. many times (precisely
endvalue-startvalue times).

Any thoughts...

Thanks again!
RobG wrote:
Nik wrote:
Hello! Thanks for reading my question first!

I have many divs with an numeral id ,for example <div
id="999">...</div>, <div id="1000">...</div>

For valid HTML, the value of the id attribute must not start with a
digit, though it can contain digits.

and I wish to do something like this,

for( var i = startvalue; i<=endvalue; i++){
document.getElementById(i).style.background="yello w;";
}

but after the first changing background, it stops and tell me that the
document.getElementById(i) has no properties. And I am sure that those
div's exist.

What's going wrong?

Who knows? Your code as posted should work. To fix the invalid ids,
just prefix the values with one or more letters, e.g.:

<script type="text/javascript">

function foo(startvalue, endvalue){
for( var i=startvalue; i<=endvalue; i++){
document.getElementById('x' + i).style.background="yellow;";
}
}

</script>
<input type="button" value="call foo(1,2)" onclick="foo(1,2);">
<div id="x0">x0</div>
<div id="x1">x1</div>
<div id="x2">x2</div>
<div id="x3">x3</div>
--
Rob
Dec 15 '06 #5
Nik said the following on 12/15/2006 12:19 AM:
Hey Randy! Thanks for coming to rescue.
Answer:It destroys the order of the conversation
Question: Why?
Answer: Top-Posting.
Question: Whats the most annoying thing on Usenet?
Unfortunately(really!) All the div's are pulled from a database with my
company's password.... BUT I have tried changing the
document.getElementById(i).style.background='yello w;'; to alert(i);

And that works - I pushed (endvalue - startvalue) times of OK myself.
But why doesn't the getElementById(i) work, this is very, very strange
to me, I am sensing something real stupid, but I cannot figure that out
myself...
Do your div elements have a style and background property defined
already? IE doesn't like changing styles that are not explicitly declared.

<div id="a100" style="background:white">......</div>

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Dec 15 '06 #6
Nik wrote:
Hey Rob, Thank You, too, for your response!

I tried your suggestion, but it failed, too. Thank You nonetheless,
time and thought and everything. Just in case you still have the
slightest interest in this seemingly trivial problem, I tried in the
loop alert(i); instead of
document.getElementById(i).style.background='yello w;';, and that
worked! I had to press OK for.. many times (precisely
endvalue-startvalue times).

Any thoughts...
Please post a complete HTML page example that is minimal (30 lines long
or less if possible) that displays the problem behavior. This will get
you the best concrete help as this is a concrete problem.

Peter

Dec 15 '06 #7
Nik
Hello Everyone who commented and care to come back to see how this
turned out:

I found the problem (a stupid one as suspected): Because not all my div
ids are continuous, meaning, instead of 1,2,3,4,5,6,... they are 1, 4
7, 11, 23, 53,55, and so on, so the loop stops whenever it finds that a
particular id of nonexistent. I put an if() on the
document.getelementbyId(i) to filter out the nonexistent ones and it
works wonderfully.

Thank you all again, really I almost scratched my eyes out to try to
figure this out.

Happy chanukah and merry xmas.
nik
Peter Michaux wrote:
Nik wrote:
Hey Rob, Thank You, too, for your response!

I tried your suggestion, but it failed, too. Thank You nonetheless,
time and thought and everything. Just in case you still have the
slightest interest in this seemingly trivial problem, I tried in the
loop alert(i); instead of
document.getElementById(i).style.background='yello w;';, and that
worked! I had to press OK for.. many times (precisely
endvalue-startvalue times).

Any thoughts...

Please post a complete HTML page example that is minimal (30 lines long
or less if possible) that displays the problem behavior. This will get
you the best concrete help as this is a concrete problem.

Peter
Dec 15 '06 #8
Nik wrote:
Hello! Thanks for reading my question first!

I have many divs with an numeral id ,for example <div
id="999">...</div>, <div id="1000">...</div>

and I wish to do something like this,

for( var i = startvalue; i<=endvalue; i++){
document.getElementById(i).style.background="yello w;";
}

but after the first changing background, it stops and tell me that the
document.getElementById(i) has no properties. And I am sure that those
div's exist.

What's going wrong?

Thanks So Much!
While your evaluation works you may end up doing a lot of unnecessary
looping. If your database is using an autoincrementing primary key, you
might get to a point where you're looping from 0 but none of the divs
begin until 10000 or something. You might want to use the
getElementsByTagName function to return only divs, so you're only
looping over tags that are important to you.

You can also get more granular control over groups of elements by
giving them a user defined attribute so you can tie them together, and
then using the getAttribute function to identify just the specific
elements that you have flagged for modification. Here's a code snippet
to get you started...

function changeReleventElements(selAttribute, assignVal){
// selAttribute can contain any style attribute to change, such as
"background"
// assignVal could be passed color, such as "yellow"
var aDivTags=document.getElementsByTagName("div") ?
document.getElementsByTagName("div") : document.all;
for (i=0; i<aDivTags.length; i++){
u=aDivTags[i].getAttribute("colorme");
if(u!==null){
eval("aDivTags[i].style."+selAttribute+"='"+assignVal+"'");
}
}
}

<div id="RandomNumber" colorme>
<input type="button" value="Change"
onClick="changeReleventElements('background','yell ow');">

Dec 16 '06 #9
pangea33 wrote:
Nik wrote:
>>Hello! Thanks for reading my question first!

I have many divs with an numeral id ,for example <div
id="999">...</div>, <div id="1000">...</div>

and I wish to do something like this,

for( var i = startvalue; i<=endvalue; i++){
document.getElementById(i).style.background="yel low;";
}

but after the first changing background, it stops and tell me that the
document.getElementById(i) has no properties. And I am sure that those
div's exist.

What's going wrong?

Thanks So Much!


While your evaluation works you may end up doing a lot of unnecessary
looping. If your database is using an autoincrementing primary key, you
might get to a point where you're looping from 0 but none of the divs
begin until 10000 or something. You might want to use the
getElementsByTagName function to return only divs, so you're only
looping over tags that are important to you.

You can also get more granular control over groups of elements by
giving them a user defined attribute so you can tie them together, and
then using the getAttribute function to identify just the specific
elements that you have flagged for modification. Here's a code snippet
to get you started...

function changeReleventElements(selAttribute, assignVal){
// selAttribute can contain any style attribute to change, such as
"background"
// assignVal could be passed color, such as "yellow"
var aDivTags=document.getElementsByTagName("div") ?
document.getElementsByTagName("div") : document.all;
for (i=0; i<aDivTags.length; i++){
u=aDivTags[i].getAttribute("colorme");
if(u!==null){

eval("aDivTags[i].style."+selAttribute+"='"+assignVal+"'");

Or simply: aDivTags[i].style[selAttribute]=assignVal;

Mick
}
}
}

<div id="RandomNumber" colorme>
<input type="button" value="Change"
onClick="changeReleventElements('background','yell ow');">
Dec 16 '06 #10

mick white wrote:
pangea33 wrote:
Nik wrote:
>Hello! Thanks for reading my question first!

I have many divs with an numeral id ,for example <div
id="999">...</div>, <div id="1000">...</div>

and I wish to do something like this,

for( var i = startvalue; i<=endvalue; i++){
document.getElementById(i).style.background="yell ow;";
}

but after the first changing background, it stops and tell me that the
document.getElementById(i) has no properties. And I am sure that those
div's exist.

What's going wrong?

Thanks So Much!

While your evaluation works you may end up doing a lot of unnecessary
looping. If your database is using an autoincrementing primary key, you
might get to a point where you're looping from 0 but none of the divs
begin until 10000 or something. You might want to use the
getElementsByTagName function to return only divs, so you're only
looping over tags that are important to you.

You can also get more granular control over groups of elements by
giving them a user defined attribute so you can tie them together, and
then using the getAttribute function to identify just the specific
elements that you have flagged for modification. Here's a code snippet
to get you started...

function changeReleventElements(selAttribute, assignVal){
// selAttribute can contain any style attribute to change, such as
"background"
// assignVal could be passed color, such as "yellow"
var aDivTags=document.getElementsByTagName("div") ?
document.getElementsByTagName("div") : document.all;
for (i=0; i<aDivTags.length; i++){
u=aDivTags[i].getAttribute("colorme");
if(u!==null){


eval("aDivTags[i].style."+selAttribute+"='"+assignVal+"'");

Or simply: aDivTags[i].style[selAttribute]=assignVal;

Mick
}
}
}

<div id="RandomNumber" colorme>
<input type="button" value="Change"
onClick="changeReleventElements('background','yell ow');">
Good call, Mick. I am working on the bad habit of using eval when it's
not needed.

Dec 16 '06 #11

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

6 posts views Thread by Peter Ballard | last post: by
1 post views Thread by .Net Sports | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.