f



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

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="yellow;";
}

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!

0
NiKSOsf (2)
12/15/2006 5:08:05 AM
comp.lang.javascript 38370 articles. 2 followers. javascript4 (1315) is leader. Post Follow

10 Replies
1026 Views

Similar Articles

[PageSpeed] 0

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="yellow;";
> }
> 
> 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/
0
Randy
12/15/2006 5:12:10 AM
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='yellow;'; 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="yellow;";
> > }
> >
> > 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/

0
Nik
12/15/2006 5:19:42 AM
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="yellow;";
> }
>
> 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

0
RobG
12/15/2006 5:22:54 AM
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='yellow;';, 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="yellow;";
> > }
> >
> > 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

0
Nik
12/15/2006 5:28:21 AM
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='yellow;'; 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/
0
Randy
12/15/2006 6:15:12 AM
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='yellow;';, 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

0
Peter
12/15/2006 6:19:52 AM
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='yellow;';, 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

0
Nik
12/15/2006 9:57:32 PM
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="yellow;";
> }
>
> 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','yellow');">

0
pangea33
12/16/2006 7:25:21 PM
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="yellow;";
>>}
>>
>>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','yellow');">
> 
0
mick
12/16/2006 7:45:52 PM
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="yellow;";
> >>}
> >>
> >>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','yellow');">
> >

Good call, Mick. I am working on the bad habit of using eval when it's
not needed.

0
pangea33
12/16/2006 9:25:21 PM
Reply: