getelementsbyname doesn’t work for div?

@lehulaApr 19.2007

I have 12+ divs with different id’s that I want to all change their text color on button click. I would like to use the getelementsbyname but it isn’t supported. Whats the least cumbersome way to select all these divs?

to post a comment

JavaScript

11 Comments(s) _↴

@Fly_MoeApr 19.2007 — #I have 12+ divs with different id's that I want to all change their text color on button click. I would like to use the getelementsbyname but it isn't supported. Whats the least cumbersome way to select all these divs?[/QUOTE]

Use getElementById. Do a search online on how to use it. If you have problems come back here with your questions.

@samanyoluApr 19.2007 — #

 
 &lt;script type="text/javascript"&gt;
 var arr = ["red","aqua","green","yellow","orange","turquoise","pink","blue","coral","maroon","olive","navy"]
 function lehula() {
 var el = document.getElementsByName("mydiv");
 var d, i = 0;
 while(d = el[i++]) { d.style.color = arr[i-1];  }
 }
 &lt;/script&gt;
 &lt;button onclick="lehula()"&gt; click me &lt;/button&gt;
 &lt;div name="mydiv"&gt;div 0 &lt;/div&gt;
 &lt;div name="mydiv"&gt;div 1 &lt;/div&gt;
 &lt;div name="mydiv"&gt;div 2 &lt;/div&gt;
 &lt;div name="mydiv"&gt;div 3 &lt;/div&gt;
 &lt;div name="mydiv"&gt;div 4 &lt;/div&gt;
 &lt;div name="mydiv"&gt;div 5 &lt;/div&gt;
 &lt;div name="mydiv"&gt;div 6 &lt;/div&gt;
 &lt;div name="mydiv"&gt;div 7 &lt;/div&gt;
 &lt;div name="mydiv"&gt;div 8 &lt;/div&gt;
 &lt;div name="mydiv"&gt;div 9 &lt;/div&gt;
 &lt;div name="mydiv"&gt;div 10 &lt;/div&gt;
 &lt;div name="mydiv"&gt;div 11 &lt;/div&gt;

<i>
 </i>&lt;script type="text/javascript"&gt;
 function lehula() {
 var el = document.getElementsByName("mydiv");
 var d, i = 0;
 while(d = el[i++]) { d.style.color = "red";  }
 }
 &lt;/script&gt;
 &lt;button onclick="lehula()"&gt; click me &lt;/button&gt;
 &lt;div name="mydiv"&gt;div 0 &lt;/div&gt;
 &lt;div name="mydiv"&gt;div 1 &lt;/div&gt;
 &lt;div name="mydiv"&gt;div 2 &lt;/div&gt;
 &lt;div name="mydiv"&gt;div 3 &lt;/div&gt;
 &lt;div name="mydiv"&gt;div 4 &lt;/div&gt;
 &lt;div name="mydiv"&gt;div 5 &lt;/div&gt;
 &lt;div name="mydiv"&gt;div 6 &lt;/div&gt;
 &lt;div name="mydiv"&gt;div 7 &lt;/div&gt;
 &lt;div name="mydiv"&gt;div 8 &lt;/div&gt;
 &lt;div name="mydiv"&gt;div 9 &lt;/div&gt;
 &lt;div name="mydiv"&gt;div 10 &lt;/div&gt;
 &lt;div name="mydiv"&gt;div 11 &lt;/div&gt;

@aj_nscApr 19.2007 — #I had a similar situation to this...I did something like this. I can't take credit for it, I picked up the idea somewhere online but I can't remember where:

<i>
 </i> for (i=0;i&lt;document.getElementsByTagName("div").length; i++) {
 if(document.getElementsByTagName("div").item(i).name == "mydiv") {
 document.getElementsByTagName("div").item(i).color = "#000000";
 }
 }

Keep in mind you can do this with a whole host of tags (using getElementsByTagName) and whatever attribute you want.

P.S. I'm not sure if the color = "#000000"; is the Javascript equivalent to the proper CSS, but you get the picture. It's an excellent little snippet, though, don't you think?

@lehulaauthorApr 20.2007 — #hmm, that does look like a handy little snippet. thanks for sharing.

@samanyoluApr 20.2007 — #aj_nsc,

When I write

if(document.getElementsByTagName("div").item(i).[color=red]name[/color] == "mydiv") {

It works on Internet Explorer 6.

When I write

if(document.getElementsByTagName("div").item(i).[color=red]getAttribute('name') [/color]== "mydiv") {

It works on Firefox 2.0.0.3, Opera 9.10, İnternet Expoler 6

 <br/>
 &lt;script type="text/javascript"&gt;
 function changeText() {
 for (i=0;i&lt;document.getElementsByTagName("div").length; i++) {
 if(document.getElementsByTagName("div").item(i).getAttribute('name') == "mydiv") {
 document.getElementsByTagName("div").item(i).style.color = "#000000";
 }
 }
 }
 &lt;/script&gt;
 &lt;body style="color:blue"&gt;
 &lt;button onclick="changeText()"&gt; click me &lt;/button&gt;
 &lt;div name="mydiv"&gt;div 0 &lt;/div&gt;
 &lt;div name="mydiv"&gt;div 1 &lt;/div&gt;
 &lt;div name="mydiv"&gt;div 2 &lt;/div&gt;
 &lt;div name="mydiv"&gt;div 3 &lt;/div&gt;
 &lt;div name="mydiv"&gt;div 4 &lt;/div&gt;
 &lt;div name="mydiv"&gt;div 5 &lt;/div&gt;
 &lt;div name="mydiv"&gt;div 6 &lt;/div&gt;
 &lt;div name="mydiv"&gt;div 7 &lt;/div&gt;
 &lt;div name="mydiv"&gt;div 8 &lt;/div&gt;
 &lt;div name="mydiv"&gt;div 9 &lt;/div&gt;
 &lt;div name="mydiv"&gt;div 10 &lt;/div&gt;
 &lt;div name="mydiv"&gt;div 11 &lt;/div&gt;

@toicontienApr 20.2007 — #The name attribute is deprecated in HTML now. Use the class attribute instead, and then use this script:

document.getElementsByClassName = function(c) {
 var els = [], found = [];
 if (document.getElementsByTagName) {
 els = document.getElementsByTagName('*');
 for (var i=0, end=els.length; i&lt;end; i++) {
 if (els[i].className === c) {
 found.push(els[i]);
 }
 els[i] = null;
 }
 }
 return found;
 };
 
 
 function lehula() {
 var divs = document.getElementsByClassName('changeDIV');
 var arr = ["red","aqua","green","yellow","orange","turquoise","pink","blue","coral","maroon","olive","navy"];
 for (var i=0, end=divs.length; i&lt;end; i++) {
 divs[i].style.color = i &gt; 0 ? arr[i-1] : arr[arr.length -1];
 }
 }

All of your DIV tags should be like this:

[code=html]<div class="changeDIV"></div>
 <div class="changeDIV"></div>
 <div class="changeDIV"></div>
 <div class="changeDIV"></div>
 <div class="changeDIV"></div>
 <div class="changeDIV"></div>
 <div class="changeDIV"></div>
 <div class="changeDIV"></div>
 <div class="changeDIV"></div>
 <div class="changeDIV"></div>
 <div class="changeDIV"></div>
 <div class="changeDIV"></div>[/code]

@samanyoluApr 21.2007 — #Toicontien

Thanks...

@gemguyApr 21.2007 — #hi,

I had tried for a script of selecting the content inside the div tag. there i used getElementByName to get the contents of div tag. I dont know whether it is workable or not.. can anyone put me in right way

I used the function as

[CODE]
 function SelCon()
 {
 document.getElementByName("testarea").select()
 }
 [/CODE]

I have div tag as
[CODE]<div class="copycon" name = "testarea">[/CODE]

But i cant get the result what i want... Will getElementByName will get the values of div by name???.....Any valuable suggestions pls....

Gem? Guy:mad:

@FangApr 21.2007 — #If you only have one div with that name:document.getElementByName("testarea")[0].select()
[I]getElementByName[/I] returns an array.

@samanyoluApr 22.2007 — #document.getElement[color=red]s[/color]ByName

Tonicontien,

I tried your code on internet Explorer, it displays an error message.

els[i] = null;

@toicontienApr 23.2007 — #Slight change. IE-Win didn't like the found.push(); function:

document.getElementsByClassName = function(c) {
 var els = [], found = [];
 if (document.getElementsByTagName) {
 els = document.getElementsByTagName('*');
 for (var i=0, end=els.length; i&lt;end; i++) {
 if (els[i].className === c) {
 found[found.length] = els[i];
 }
 els[i] = null;
 }
 }
 return found;
 };

Also in #JavaScript _↴

appendChild doesn't work properly on IE Object doesn't support this property or method History Object

Success!

Help @lehula spread the word by sharing this article on Twitter...

Tweet This

getelementsbyname doesn’t work for div?

11 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

getelementsbyname doesn’t work for div?

11 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

11 Comments(s) _↴

Also in #JavaScript _↴