getElementById multiple Id's

[banning]

ok ok i've read everywhere how using multiple id's is wrong and what not so don't get all hatefully, if there is a better way let me know... here is what i got

var click=0;
 
function bgCOLOR(){
    if(click==0){
        click=1;
    }else{
        click=0;
    }
 
    if (click==1){
        document.getElementById('heha').style.backgroundColor='red';
    }else{
        document.getElementById('heha').style.backgroundColor='white';
    }
}
 
<table>
<tr>
<td id="heha'" onclick="bgCOLOR();"></td>
</tr>
<tr>
<td id="heha'" onclick="bgCOLOR();"></td>
</tr>
 

ok so my noob question is why wont it change the background color on both table divisions?

im pretty entry level at javascript i primarly use just php but i figured its time to grow and start integrating the 2.

anyway thanks for the help guys in advance.

[pbmods]

Heya, Banning.

Try using the name property, which does not have to be unique:

<td name="myName" ... >
.
.
.
<td name="myName" ... >
 

var tds = document.getElementsByName('myName');
for( var i = 0; i < tds.length; ++i )
{
    tds[i].style.backgroundColor = 'annoyingly bright neon peach';
}
 

[banning]

wow you're just like every where on these boards haha... i really love getting help from ya you explain things very well

[pbmods]

Heya, Banning.

We aim to please.

Good luck with your project, and if you ever need anything, post back anytime :)

[markrawlingson]

If i might suggest a slightly different method...

function bgCOLOR(oObj,sColorOn,sColorOff) {
     if (oObj.style.backgroundColor == sColorOn) {
          oObj.style.backgroundColor = sColorOff;
     }
     else {
          oObj.style.backgroundColor = sColorOn;
     }
}
 

<tr>
<td onClick="bgCOLOR(this,'#000000','#FF0000');">
 
</td>
</tr>
 

This way you don't need to fiddle with any ids or names for these objects because you are refering to 'this' - ie: the object that fired the event (onClick) - you can also re-use this function over and over and apply any color to it on the fly.

[Romulo NF]

window.onload = function() {
tds = document.getElementsByTagName("td")
    for (x=0; x<tds.length; x++) {
    tds[x].onclick = colorIt
    }
}
 
function colorIt() {
    if (!this.color) { this.color = "off" }
 
    if (this.color == "off") {
    this.color = "on"
    this.style.background = "#000"
    }
 
    else {
    this.color = "off"
    this.style.background = "#fff"
    }
}
 

Or you can do something like that so you dont wanna to place function calls directly into the html!

[banning]

all of that up there... that i wrote... lol ignore it... i was lookin at your code... and like i said before i'm learning javascript, fortunatly its pretty close to AS but anyway... i say there is an onclick function thats pretty nifty... i may have to empliment that so i dont have functions right in the html :)

[banning]

Heya, Banning.

Try using the name property, which does not have to be unique:

<td name="myName" ... >
.
.
.
<td name="myName" ... >
 

var tds = document.getElementsByName('myName');
for( var i = 0; i < tds.length; ++i )
{
    tds[i].style.backgroundColor = 'annoyingly bright neon peach';
}
 

i tried that code and it works great in firefox but it wont work in IE... i tried using

document.write(tds)

after

 var tds = document.getElementsByName('myName'); 

but before the

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

and what i got in IE was [object] and in FireFox i get [object HTMLCollection]

im trying to teach myself javascript and im sure there is something there that the document.write is telling me LOL i just dont know what to do with that information

if you want to see the site im using it on you can find it here...
http://www.doughxpress.com/staging/d...ilsElec?Wid=76

[pbmods]

Heya, Banning.

First off, you might like this:
[CODE=javascript]
JavaScript goes here.
[/code]

~_^

Now then.

Does IE throw an error at you? Or does your script just seem not to do anything?

[banning]

Heya, Banning.

First off, you might like this:

JavaScript goes here.
 

~_^

Now then.

Does IE throw an error at you? Or does your script just seem not to do anything?

Thanks about the code thing can I do CODE=php and stuff too?

and I don't get any errors coming up in IE it just doesn't do anything

[iam_clint]

do this

document.write(tds.length);

sometimes IE has a problem pulling names where the id's are the same.

the number it writes to the page should be > 0

[drhowarddrfine]

Try using the name property, which does not have to be unique:

This is what 'class' is for. Just change all the ids to 'class='.

[banning]

do this

document.write(tds.length);

sometimes IE has a problem pulling names where the id's are the same.

the number it writes to the page should be > 0

I tried it and it wrote back 0

it didnt write > 0

[banning]

This is what 'class' is for. Just change all the ids to 'class='.

change all the name= to class= ?

if i do that then i cant use getElementsByName right? and as far as i know there is no getElementByClass

[drhowarddrfine]

No. Change the id's to class. id can only be used once per page. Class can be used for multiple elements.

[banning]

No. Change the id's to class. id can only be used once per page. Class can be used for multiple elements.

im not using Id thought im using name

[drhowarddrfine]

In your initial post you show using 'id' so I assumed you still were.

[banning]

In your initial post you show using 'id' so I assumed you still were.

nah i went ahead with pbmods solution

 
<td name="myName" ... >
 
 
<td name="myName" ... >
 

      var tds = document.getElementsByName('myName');
      for( var i = 0; i < tds.length; ++i )
      {
          tds[i].style.backgroundColor = 'annoyingly bright neon peach';
      }
 

[banning]

do this

document.write(tds.length);

sometimes IE has a problem pulling names where the id's are the same.

the number it writes to the page should be > 0

see when i do this in IE it comes out as 0
but when i do it in FIREFOX it comes out as 41

[acoder]

see when i do this in IE it comes out as 0
but when i do it in FIREFOX it comes out as 41

I think that IE has problems with tds and getElementsByName. A bit of testing shows that it just doesn't work. Give your table an id and try:

document.getElementById('tableID').getElementsByTagName("td");

[banning]

I think that IE has problems with tds and getElementsByName. A bit of testing shows that it just doesn't work. Give your table an id and try:

document.getElementById('tableID').getElementsByTagName("td");

when i try that it turns the whole table the color... what im trying to accomplish is just turn an individual column one color. course you probably all ready know that but yea i tried it and it worked in firefox and ie like it should :)

[acoder]

when i try that it turns the whole table the color... what im trying to accomplish is just turn an individual column one color. course you probably all ready know that but yea i tried it and it worked in firefox and ie like it should :)

So have you got it working or not?

[banning]

So have you got it working or not?

no its not working... ie just sucks i guess... when i do what you posted it just turns the whole table a colour... i dont want that, i want to highlight just one column...

here is the site im using it on, http://doughxpress.com/staging/dryerDetailsElec?Wid=76

[iam_clint]

Heres a sample i made for you highlighting rows and cols without using names and works in firefox and ie. To use the code you will need to change your table accordingly.

<script>
vertColor="#66ffcc"
horzColor="#b7efff";
 
function vertClick(col, tbl) {
    var color="";
    var table = document.getElementById(tbl);
    var entireRow=table.getElementsByTagName("tr");
    var curColor = entireRow[0].getElementsByTagName("td")[col].style.backgroundColor;
    for (i=0; i<entireRow.length; i++) {
        curEle = entireRow[i].getElementsByTagName("td")[col];
        if (curEle.getAttribute("vert")==null || curEle.getAttribute("vert")=="false") { curEle.setAttribute("vert", "true"); color = vertColor; } else { curEle.setAttribute("vert", "false"); color=""; }
        if (color=="" && curEle.getAttribute("horz")=="true") { curEle.style.backgroundColor=horzColor; } else { curEle.style.backgroundColor=color; }
    }
}
 
function horzClick(row, tbl) {
    var color="";
    var table = document.getElementById(tbl);
    var entireRow=table.getElementsByTagName("tr")[row-1];
    var tds = entireRow.getElementsByTagName("td");
    var curColor = tds[1].style.backgroundColor;
    for (i=1; i<tds.length; i++) {
        curEle = tds[i];
        if (curEle.getAttribute("horz")==null || curEle.getAttribute("horz")=="false") { curEle.setAttribute("horz", "true"); color = horzColor; } else { curEle.setAttribute("horz", "false"); color=""; }
        if (curEle.getAttribute("vert")=="true") { curEle.style.backgroundColor=vertColor; } else {  curEle.style.backgroundColor = color; }
    }
}
</script>
<STYLE>
tr { cursor: pointer; }
table { border-collapse: collapse; width: 100%; height: 100%;}
</STYLE>
<table border=1>
<tbody id="example">
<tr><td  onclick="horzClick('1', 'example');">Test1<td onclick="vertClick('1', 'example');">Test2<td onclick="vertClick('2', 'example');">Test3<td onclick="vertClick('3', 'example');">Test4<td onclick="vertClick('4', 'example');">Test5<td onclick="vertClick('5', 'example');">Test6
<tr><td  onclick="horzClick('2', 'example');">Test1<td onclick="vertClick('1', 'example');">Test2<td onclick="vertClick('2', 'example');">Test3<td onclick="vertClick('3', 'example');">Test4<td onclick="vertClick('4', 'example');">Test5<td onclick="vertClick('5', 'example');">Test6
<tr><td  onclick="horzClick('3', 'example');">Test1<td onclick="vertClick('1', 'example');">Test2<td onclick="vertClick('2', 'example');">Test3<td onclick="vertClick('3', 'example');">Test4<td onclick="vertClick('4', 'example');">Test5<td onclick="vertClick('5', 'example');">Test6
<tr><td  onclick="horzClick('4', 'example');">Test1<td onclick="vertClick('1', 'example');">Test2<td onclick="vertClick('2', 'example');">Test3<td onclick="vertClick('3', 'example');">Test4<td onclick="vertClick('4', 'example');">Test5<td onclick="vertClick('5', 'example');">Test6
<tr><td  onclick="horzClick('5', 'example');">Test1<td onclick="vertClick('1', 'example');">Test2<td onclick="vertClick('2', 'example');">Test3<td onclick="vertClick('3', 'example');">Test4<td onclick="vertClick('4', 'example');">Test5<td onclick="vertClick('5', 'example');">Test6
<tr><td  onclick="horzClick('6', 'example');">Test1<td onclick="vertClick('1', 'example');">Test2<td onclick="vertClick('2', 'example');">Test3<td onclick="vertClick('3', 'example');">Test4<td onclick="vertClick('4', 'example');">Test5<td onclick="vertClick('5', 'example');">Test6
<tr><td  onclick="horzClick('7', 'example');">Test1<td onclick="vertClick('1', 'example');">Test2<td onclick="vertClick('2', 'example');">Test3<td onclick="vertClick('3', 'example');">Test4<td onclick="vertClick('4', 'example');">Test5<td onclick="vertClick('5', 'example');">Test6
<tr><td  onclick="horzClick('8', 'example');">Test1<td onclick="vertClick('1', 'example');">Test2<td onclick="vertClick('2', 'example');">Test3<td onclick="vertClick('3', 'example');">Test4<td onclick="vertClick('4', 'example');">Test5<td onclick="vertClick('5', 'example');">Test6
<tr><td  onclick="horzClick('9', 'example');">Test1<td onclick="vertClick('1', 'example');">Test2<td onclick="vertClick('2', 'example');">Test3<td onclick="vertClick('3', 'example');">Test4<td onclick="vertClick('4', 'example');">Test5<td onclick="vertClick('5', 'example');">Test6
<tr><td  onclick="horzClick('10', 'example');">Test1<td onclick="vertClick('1', 'example');">Test2<td onclick="vertClick('2', 'example');">Test3<td onclick="vertClick('3', 'example');">Test4<td onclick="vertClick('4', 'example');">Test5<td onclick="vertClick('5', 'example');">Test6
<tr><td  onclick="horzClick('11', 'example');">Test1<td onclick="vertClick('1', 'example');">Test2<td onclick="vertClick('2', 'example');">Test3<td onclick="vertClick('3', 'example');">Test4<td onclick="vertClick('4', 'example');">Test5<td onclick="vertClick('5', 'example');">Test6
<tr><td  onclick="horzClick('12', 'example');">Test1<td onclick="vertClick('1', 'example');">Test2<td onclick="vertClick('2', 'example');">Test3<td onclick="vertClick('3', 'example');">Test4<td onclick="vertClick('4', 'example');">Test5<td onclick="vertClick('5', 'example');">Test6
<tr><td  onclick="horzClick('13', 'example');">Test1<td onclick="vertClick('1', 'example');">Test2<td onclick="vertClick('2', 'example');">Test3<td onclick="vertClick('3', 'example');">Test4<td onclick="vertClick('4', 'example');">Test5<td onclick="vertClick('5', 'example');">Test6
<tr><td  onclick="horzClick('14', 'example');">Test1<td onclick="vertClick('1', 'example');">Test2<td onclick="vertClick('2', 'example');">Test3<td onclick="vertClick('3', 'example');">Test4<td onclick="vertClick('4', 'example');">Test5<td onclick="vertClick('5', 'example');">Test6
<tr><td  onclick="horzClick('15', 'example');">Test1<td onclick="vertClick('1', 'example');">Test2<td onclick="vertClick('2', 'example');">Test3<td onclick="vertClick('3', 'example');">Test4<td onclick="vertClick('4', 'example');">Test5<td onclick="vertClick('5', 'example');">Test6
<tr><td  onclick="horzClick('16', 'example');">Test1<td onclick="vertClick('1', 'example');">Test2<td onclick="vertClick('2', 'example');">Test3<td onclick="vertClick('3', 'example');">Test4<td onclick="vertClick('4', 'example');">Test5<td onclick="vertClick('5', 'example');">Test6
 
</tbody>
</table>
 

This code should do exactly what you want in all browsers!

[iam_clint]

Code fixed for colspan checks

<script>
vertColor="#66ffcc"
horzColor="#b7efff";
 
function vertClick(col, tbl) {
    var color="";
    var blnColSpan = false;
    var table = document.getElementById(tbl);
    var entireRow=table.getElementsByTagName("tr");
    for (i=0; i<entireRow.length; i++) {
        curEle = entireRow[i].getElementsByTagName("td")[col];
        for (b=0; b<entireRow[i].getElementsByTagName("td").length; b++) { 
            colspan = entireRow[i].getElementsByTagName("td")[b].getAttribute("colspan");
            if (colspan!=null && colspan!=1) { blnColSpan = true; }
        }
        if (!blnColSpan) { 
            if (typeof(curEle)=="object") {
                if (curEle.getAttribute("vert")==null || curEle.getAttribute("vert")=="false") { curEle.setAttribute("vert", "true"); color = vertColor; } else { curEle.setAttribute("vert", "false"); color=""; }
                if (color=="" && curEle.getAttribute("horz")=="true") { curEle.style.backgroundColor=horzColor; } else { curEle.style.backgroundColor=color; }
            }
        }
        blnColSpan = false;
    }
}
 
function horzClick(row, tbl) {
    var color="";
    var table = document.getElementById(tbl);
    var entireRow=table.getElementsByTagName("tr")[row-1];
    var tds = entireRow.getElementsByTagName("td");
    for (i=1; i<tds.length; i++) {
        curEle = tds[i];
        if (curEle.getAttribute("horz")==null || curEle.getAttribute("horz")=="false") { curEle.setAttribute("horz", "true"); color = horzColor; } else { curEle.setAttribute("horz", "false"); color=""; }
        if (curEle.getAttribute("vert")=="true") { curEle.style.backgroundColor=vertColor; } else {  curEle.style.backgroundColor = color; }
    }
}
</script>
 

[iam_clint]

This is the same thing except theres an intersecting color.

<script>
/* Javascript written by iam_clint */
vertColor="#66ffcc";
horzColor="#b7efff";
intersectColor="#aa22f0";
 
function vertClick(col, tbl) {
    var color="";
    var blnColSpan = false;
    var table = document.getElementById(tbl);
    var entireRow=table.getElementsByTagName("tr");
    for (i=0; i<entireRow.length; i++) {
        curEle = entireRow[i].getElementsByTagName("td")[col];
        for (b=0; b<entireRow[i].getElementsByTagName("td").length; b++) { 
            colspan = entireRow[i].getElementsByTagName("td")[b].getAttribute("colspan");
            if (colspan!=null && colspan!=1) { blnColSpan = true; }
        }
        if (!blnColSpan) { 
            if (typeof(curEle)=="object") {
                if (curEle.getAttribute("vert")==null || curEle.getAttribute("vert")=="false") { curEle.setAttribute("vert", "true"); color = vertColor; } else { curEle.setAttribute("vert", "false"); color=""; }
                if (curEle.getAttribute("horz")=="true" && curEle.getAttribute("vert")=="true") { curEle.style.backgroundColor=intersectColor; } else if (curEle.getAttribute("vert")=="false" && curEle.getAttribute("horz")=="true") { curEle.style.backgroundColor=horzColor; } else { curEle.style.backgroundColor=color; }
            }
        }
        blnColSpan = false;
    }
}
 
function horzClick(row, tbl) {
    var color="";
    var table = document.getElementById(tbl);
    var entireRow=table.getElementsByTagName("tr")[row-1];
    var tds = entireRow.getElementsByTagName("td");
    for (i=1; i<tds.length; i++) {
        curEle = tds[i];
        if (curEle.getAttribute("horz")==null || curEle.getAttribute("horz")=="false") { curEle.setAttribute("horz", "true"); color = horzColor; } else { curEle.setAttribute("horz", "false"); color=""; }
        if (curEle.getAttribute("vert")=="true" && curEle.getAttribute("horz")=="true") { curEle.style.backgroundColor=intersectColor; } else if (curEle.getAttribute("vert")=="true" && curEle.getAttribute("horz")=="false") {  curEle.style.backgroundColor = vertColor; } else { curEle.style.backgroundColor = color;  }
    }
}
</script>
<STYLE>
tr { cursor: pointer; }
table { border-collapse: collapse; width: 100%; height: 100%;}
</STYLE>
<table border=1>
<tbody id="example">
<tr><td  onclick="horzClick('1', 'example');">Test1<td onclick="vertClick('1', 'example');">Test2<td onclick="vertClick('2', 'example');">Test3<td onclick="vertClick('3', 'example');">Test4<td onclick="vertClick('4', 'example');">Test5<td onclick="vertClick('5', 'example');">Test6
<tr><td  onclick="horzClick('2', 'example');">Test1<td onclick="vertClick('1', 'example');">Test2<td onclick="vertClick('2', 'example');">Test3<td onclick="vertClick('3', 'example');">Test4<td onclick="vertClick('4', 'example');">Test5<td onclick="vertClick('5', 'example');">Test6
<tr><td  onclick="horzClick('3', 'example');">Test1<td onclick="vertClick('1', 'example');">Test2<td onclick="vertClick('2', 'example');">Test3<td onclick="vertClick('3', 'example');">Test4<td onclick="vertClick('4', 'example');">Test5<td onclick="vertClick('5', 'example');">Test6
<tr><td  onclick="horzClick('4', 'example');">Test1<td onclick="vertClick('1', 'example');">Test2<td onclick="vertClick('2', 'example');">Test3<td onclick="vertClick('3', 'example');">Test4<td onclick="vertClick('4', 'example');">Test5<td onclick="vertClick('5', 'example');">Test6
<tr><td  onclick="horzClick('5', 'example');">Test1<td onclick="vertClick('1', 'example');">Test2<td onclick="vertClick('2', 'example');">Test3<td onclick="vertClick('3', 'example');">Test4<td onclick="vertClick('4', 'example');">Test5<td onclick="vertClick('5', 'example');">Test6
<tr><td  onclick="horzClick('6', 'example');">Test1<td onclick="vertClick('1', 'example');">Test2<td onclick="vertClick('2', 'example');">Test3<td onclick="vertClick('3', 'example');">Test4<td onclick="vertClick('4', 'example');">Test5<td onclick="vertClick('5', 'example');">Test6
<tr><td  onclick="horzClick('7', 'example');">Test1<td onclick="vertClick('1', 'example');">Test2<td onclick="vertClick('2', 'example');">Test3<td onclick="vertClick('3', 'example');">Test4<td onclick="vertClick('4', 'example');">Test5<td onclick="vertClick('5', 'example');">Test6
<tr><td  onclick="horzClick('8', 'example');">Test1<td onclick="vertClick('1', 'example');">Test2<td onclick="vertClick('2', 'example');">Test3<td onclick="vertClick('3', 'example');">Test4<td onclick="vertClick('4', 'example');">Test5<td onclick="vertClick('5', 'example');">Test6
<tr><td  onclick="horzClick('9', 'example');">Test1<td onclick="vertClick('1', 'example');">Test2<td onclick="vertClick('2', 'example');">Test3<td onclick="vertClick('3', 'example');">Test4<td onclick="vertClick('4', 'example');">Test5<td onclick="vertClick('5', 'example');">Test6
<tr><td  onclick="horzClick('10', 'example');">Test1<td onclick="vertClick('1', 'example');">Test2<td onclick="vertClick('2', 'example');">Test3<td onclick="vertClick('3', 'example');">Test4<td onclick="vertClick('4', 'example');">Test5<td onclick="vertClick('5', 'example');">Test6
<tr><td  onclick="horzClick('11', 'example');">Test1<td onclick="vertClick('1', 'example');">Test2<td onclick="vertClick('2', 'example');">Test3<td onclick="vertClick('3', 'example');">Test4<td onclick="vertClick('4', 'example');">Test5<td onclick="vertClick('5', 'example');">Test6
<tr><td  onclick="horzClick('12', 'example');">Test1<td onclick="vertClick('1', 'example');">Test2<td onclick="vertClick('2', 'example');">Test3<td onclick="vertClick('3', 'example');">Test4<td onclick="vertClick('4', 'example');">Test5<td onclick="vertClick('5', 'example');">Test6
<tr><td  onclick="horzClick('13', 'example');">Test1<td onclick="vertClick('1', 'example');">Test2<td onclick="vertClick('2', 'example');">Test3<td onclick="vertClick('3', 'example');">Test4<td onclick="vertClick('4', 'example');">Test5<td onclick="vertClick('5', 'example');">Test6
<tr><td  onclick="horzClick('14', 'example');">Test1<td onclick="vertClick('1', 'example');">Test2<td onclick="vertClick('2', 'example');">Test3<td onclick="vertClick('3', 'example');">Test4<td onclick="vertClick('4', 'example');">Test5<td onclick="vertClick('5', 'example');">Test6
<tr><td  onclick="horzClick('15', 'example');">Test1<td onclick="vertClick('1', 'example');">Test2<td onclick="vertClick('2', 'example');">Test3<td onclick="vertClick('3', 'example');">Test4<td onclick="vertClick('4', 'example');">Test5<td onclick="vertClick('5', 'example');">Test6
 
</tbody>
</table>
 
 

[banning]

This is the same thing except theres an intersecting color.

This is the answer too