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

N

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="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!
 
R

Randy Webb

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.
 
N

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='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
 
R

RobG

Nik said:
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>
 
N

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='yellow;';, and that
worked! I had to press OK for.. many times (precisely
endvalue-startvalue times).

Any thoughts...

Thanks again!
 
R

Randy Webb

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>
 
P

Peter Michaux

Nik said:
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
 
N

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
 
P

pangea33

Nik said:
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.getAttribute("colorme");
if(u!==null){
eval("aDivTags.style."+selAttribute+"='"+assignVal+"'");
}
}
}

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

mick white

pangea33 said:
Nik said:
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.getAttribute("colorme");
if(u!==null){



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

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

Mick
 
P

pangea33

mick said:
pangea33 said:
Nik said:
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.getAttribute("colorme");
if(u!==null){



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

Or simply: aDivTags.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.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top