By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,238 Members | 1,661 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,238 IT Pros & Developers. It's quick & easy.

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

P: n/a
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!
Jul 23 '05 #1
Share this Question
Share on Google+
14 Replies


P: n/a
"Charlie T" <ch*************@gmail.com> wrote in message
news:ee**************************@posting.google.c om...
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.

--
Dag
5826'15.9" N 00846'45.5" E
Jul 23 '05 #2

P: n/a
On Wed, 08 Sep 2004 05:43:14 GMT, Dag Sunde <ds@orion.no-way> wrote:
"Charlie T" <ch*************@gmail.com> wrote in message
news:ee**************************@posting.google.c om...
is there any way to get this to work?

myID.innerHTML = "Hello"

<DIV id="myID"></DIV>
<DIV id="myID"></DIV>
No, there isn't. As Dag said, using the same ID is invalid HTML and so
browser behaviour can be unpredictable.
I would like "Hello" to apear in each DIV with the ID of 'myID'. I do
now want to change the id.

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[i] || 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

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
Jul 23 '05 #3

P: n/a
"Charlie T" <ch*************@gmail.com> wrote in message
news:ee**************************@posting.google.c om...
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[i] instead of the text colour?

var divs = document.getElementsByTagName('div');
if (divs) {
for (var i = 0; i < divs.length; i++) {
if (divs[i].className == 'myclass') {
divs[i].style.color = 'Red';
}
}
}
Jul 23 '05 #4

P: n/a
"Charlie T" <ch*************@gmail.com> wrote in message
news:ee**************************@posting.google.c om...
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[i].className == 'myclass')
{
divs[i].innerHTML = "New Text"
}
}
}
}
Jul 23 '05 #5

P: n/a
On Wed, 8 Sep 2004 10:33:37 +0100, Danny@Kendal
<da***@STOPSPAMghpkendal.co.uk> wrote:

[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[i].className == 'myclass')
{
divs[i].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[i].className) {
divs[i].innerHTML = "New Text";
}
}
}
}

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
Jul 23 '05 #6

P: n/a
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
Jul 23 '05 #7

P: n/a
"Charlie T" <ch*************@gmail.com> wrote in message
news:ee**************************@posting.google.c om...
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.

--
Dag
5826'15.9" N 00846'45.5" E
Jul 23 '05 #8

P: n/a
On Wed, 08 Sep 2004 19:17:23 GMT, Dag Sunde wrote:

(styles)
You put it in your .ccs file, ..


Of course, Dag meant '.css'* there.

[ * Cascading Style Sheets ]

Although the exact file extension *usually*
does not matter, sometimes browsers will
fall back to the file type to try and guess
what to do with it.

It's best to give the browser every hint possible.

--
Andrew Thompson
http://www.PhySci.org/ Open-source software suite
http://www.PhySci.org/codes/ Web & IT Help
http://www.1point1C.org/ Science & Technology
Jul 23 '05 #9

P: n/a
On 8 Sep 2004 12:12:49 -0700, Charlie T <ch*************@gmail.com> wrote:
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

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
Jul 23 '05 #10

P: n/a
"Michael Winter" <M.******@blueyonder.co.invalid> wrote in message news:<opsd0xpth3x13kvk@atlantis>...
On 8 Sep 2004 12:12:49 -0700, Charlie T <ch*************@gmail.com> wrote:
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


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
Jul 23 '05 #11

P: n/a
Charlie T wrote:
"Michael Winter" <M.******@blueyonder.co.invalid> wrote in message news:<opsd0xpth3x13kvk@atlantis>...
On 8 Sep 2004 12:12:49 -0700, Charlie T <ch*************@gmail.com> wrote:

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

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?
--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq
Jul 23 '05 #12

P: n/a
Charlie T wrote:
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
--
It's get'in so as a businessman can't expect no return from a fixed fight.
If you can't trust a fix, what can you trust?
Jul 23 '05 #13

P: n/a

Mike,

I'm intrigued by your use of

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

rather than the equivalent and shorter:

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

Is there any reason
-
Rob

Jul 23 '05 #14

P: n/a
On Sun, 12 Sep 2004 21:42:41 -0500, RobG
<Ro*********@mail.forum4designers.com> wrote:
I'm intrigued by your use of

for(var i = 0, n = divs.length; i < n; ++i) {
if('myclass' == divs[i].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.

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
Jul 23 '05 #15

This discussion thread is closed

Replies have been disabled for this discussion.