setting the inner.HTML of <DIV> with duplicate IDs...

[Charlie T]

Hello,

is there any way to get this to work?

myID.innerHTML = "Hello"

<DIV id="myID"></DIV>
<DIV id="myID"></DIV>


I would like "Hello" to apear in each DIV with the ID of 'myID'. I do
now want to change the id.

Thanks in advance!

 

[Dag Sunde]

Hello,

is there any way to get this to work?

myID.innerHTML = "Hello"

<DIV id="myID"></DIV>
<DIV id="myID"></DIV>


I would like "Hello" to apear in each DIV with the ID of 'myID'. I do
now want to change the id.

Don't!

The id attribute is supposed to be unique. To have duplicate id's on
the same page is actually wrong use of the id-tag.

see: http://www.w3.org/TR/html4/struct/global.html#adef-id

Use the name attribute if you must have equal names.

 

[Michael Winter]

No, there isn't. As Dag said, using the same ID is invalid HTML and so
browser behaviour can be unpredictable.

You'll have to alter them. Once you do, you can use something like:

<div id="myID1">&nbsp;</div>
<div id="myID2">&nbsp;</div>

var getRefById = function() {return null;};
if(document.getElementById) {
getRefById = function(i) {return document.getElementById(i);};
} else if(document.all) {
getRefById = function(i) {return document.all || null;};
}

function changeContents() {
var o, nD = 2; // Number of DIVs

for(var i = 1; i <= nD; ++i) {
o = getRefById('myID' + i);

if(o) {o.innerHTML = 'Hello';}
}
}

[snip]

Use the name attribute if you must have equal names.

That isn't any better. The DIV element doesn't have a name attribute.

Mike

 

[Danny@Kendal]

Hello,

is there any way to get this to work?

myID.innerHTML = "Hello"

<DIV id="myID"></DIV>
<DIV id="myID"></DIV>


I would like "Hello" to apear in each DIV with the ID of 'myID'. I do
now want to change the id.

IDs *must* be unique within the page so you will have to change them.

The following code, I've been told, loops through all DIV elements with the
class name "myclass" and changes the text colour to red.

Would it be possible to change the id="myId" to class="myclass" on your page
then change the routine below so it changes the innerHTML of each element
listed in divs instead of the text colour?

var divs = document.getElementsByTagName('div');
if (divs) {
for (var i = 0; i < divs.length; i++) {
if (divs.className == 'myclass') {
divs.style.color = 'Red';
}
}
}

 

[Danny@Kendal]

Hello,

is there any way to get this to work?

myID.innerHTML = "Hello"

<DIV id="myID"></DIV>
<DIV id="myID"></DIV>


I would like "Hello" to apear in each DIV with the ID of 'myID'. I do
now want to change the id.

As an update to my earlier reply...

Change id="myID" to class="myclass" then stick the following function
wherever it's wanted.
It seems to work in the IE6, Opera7.54 and Netscape7.1

function changeDiv()
{
var divs = document.getElementsByTagName('div')
if (divs)
{
for (var i = 0; i < divs.length; i++)
{
if (divs.className == 'myclass')
{
divs.innerHTML = "New Text"
}
}
}
}

 

[Michael Winter]

On Wed, 8 Sep 2004 10:33:37 +0100, Danny@Kendal

[snip]

function changeDiv()
{
var divs = document.getElementsByTagName('div')
if (divs)

That shouldn't be necessary. If there are no matching elements, gEBTN must
return an empty collection. If that's the case, the for loop will be
skipped.

That said, it is necessary to feature test for gEBTN before calling it.

{
for (var i = 0; i < divs.length; i++)
{
if (divs.className == 'myclass')
{
divs.innerHTML = "New Text"
}
}
}
}

This would be better written as:

function changeDiv() {
if(document.getElementsByTagName) {
var divs = document.getElementsByTagName('DIV');
for(var i = 0, n = divs.length; i < n; ++i) {
if('myclass' == divs.className) {
divs.innerHTML = "New Text";
}
}
}
}

Mike

 

[Charlie T]

Thanks guys!

It seems to work, but my only fear is that if I decide to use CSS
where will I put the class?

What if I did this...
<span class="CSS">
<DIV class="myclass"></DIV>
</span>

will this work?..hmm

Any ideas?

-Charlie

 

[Dag Sunde]

Thanks guys!

It seems to work, but my only fear is that if I decide to use CSS
where will I put the class?

What if I did this...
<span class="CSS">
<DIV class="myclass"></DIV>
</span>

will this work?..hmm

No.

You put it in your .ccs file, or in a <style>
section at the top of your document.

 

[Michael Winter]

Thanks guys!

It seems to work, but my only fear is that if I decide to use CSS
where will I put the class?

Pardon? Where did anyone mention CSS?

What if I did this...
<span class="CSS">
<DIV class="myclass"></DIV>
</span>

will this work?..hmm

It depends what you're trying to achieve by doing it. As I don't know
where this line of questioning came from (CSS shouldn't have anything to
do with this issue), I couldn't guess.

By the way, the HTML you just presented is invalid. SPAN elements can only
contain inline elements (text, form controls, images, etc). DIV is a block
element and can only be contained by other block elements.

Mike

 

[Charlie T]

Pardon? Where did anyone mention CSS?


It depends what you're trying to achieve by doing it. As I don't know
where this line of questioning came from (CSS shouldn't have anything to
do with this issue), I couldn't guess.

By the way, the HTML you just presented is invalid. SPAN elements can only
contain inline elements (text, form controls, images, etc). DIV is a block
element and can only be contained by other block elements.

Mike

My question was... if I use the class to populate the innerHTML of an
object then what would I use if I wanted to create a 'CSS' for it.

Then I suggested nesting my DIV inside of another tag with the class I
need for CSS....

get it?

Thanks for all the help

 

[Randy Webb]

My question was... if I use the class to populate the innerHTML of an
object then what would I use if I wanted to create a 'CSS' for it.

Why not the class you assigned to it?

Then I suggested nesting my DIV inside of another tag with the class I
need for CSS....

If you nest the DIV, nest it inside another DIV. But as Michael said, it
seems overkill to nest two DIV's just to be able to script it. Give them
unique ID's and the problem is solved.

get it?

Can I get back to you on that one?

 

[Thomas 'PointedEars' Lahn]

What if I did this...
<span class="CSS">
<DIV class="myclass"></DIV>
</span>

will this work?..hmm

That's unlikely, it is not Valid HTML.

<http://validator.w3.org/>


PointedEars

 

[Michael Winter]

I'm intrigued by your use of

for(var i = 0, n = divs.length; i < n; ++i) {
if('myclass' == divs.className) {

rather than the equivalent and shorter:

for(var i = 0; i < divs.length; ++i)

They aren't always equivalent; it depends on what happens during execution
of the loop. If the length of the array/collection can change, there is a
big difference in behaviour. But, as I'm simply iterating through the
collection, there is no need to continuously resolve an unchanging
property. Instead, I can look it up once and store the value.

Is there any reason?

I suppose there's little to be gained in Javascript, unless the executing
machine is slow or the collection is very large[1], so it's habit, mainly.
However, I consider it a good idea to get as much performance as possible
from event-driven code.

Mike


[1] Either is possible on the Web. Getting a collection of frequently used
elements within a document could easily return hundreds of items.