Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

attribute change not being recognized by function

Status
Not open for further replies.
electricphp

electricphp

Programmer
Feb 20, 2008
71
US
I have this function that changes the background color of a table row but it's not working correctly.

Code: 
function changeColor(activeRow){

alert(document.getElementById("myTable").rows[activeRow].bgColor);

if (document.getElementById("myTable").rows[activeRow].bgColor == '#a2dd51')
 {document.getElementById("myTable").rows[activeRow].style.backgroundColor = '#ffff99';}
}

If I invoke the function it will change the color from #a2dd51 to #ffff99, so normally if I invoke the function again, nothing should happen, since the color has been changed. But if I invoke it again, the alert still shows #a2dd51 even though on the page I can see the color changed accordingly
 
Sort by date Sort by votes
That's because the .bgColor property has not changed. You changed the style.backgroundColor property.

Two different properties that yes alter the same thing, but can have independent values. Try checking for style.backgroundColor instead of bgcolor.

Which incidentally is the correct way to do it, as its referencing the CSS value rather than the deprecated value bgColor.



----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
Upvote 0 Downvote
well, if I do:

alert(document.getElementById("myTable").rows[activeRow].style.backgroundColor);

I get nothing, so what should I do then?
 
Upvote 0 Downvote
It works fine for me. I get the BG representation of the current color:

Having set the style.backgroundColor of a table row to blue, I get: rgb(0, 0, 255) when I alert the property.

If I don't set either property bgcolor or style.backgroundColor) before alerting it then bgcolor returns undefined while style.backgroundColor is empty.

What exactly is the 'activerow' you are passing? The ID of the row? the name?



----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
Upvote 0 Downvote
The activerow is the rowindex of the table, so for example the row in position 6. I'll have to post all the code when I get back to the apartment, as I'm typing this from my mobile.
 
Upvote 0 Downvote
here is a a simplified version of my page:

Code: 
<html>
<head>
<script language = "Javascript">
function makeYel(cb,ar,typerow){
activeRow = ar.parentNode.parentNode.rowIndex;  
alert(document.getElementById("myTable").rows[activeRow].bgColor);
	 
if(document.getElementById("myTable").rows[activeRow].style.backgroundColor == '#a2dd51'){document.getElementById("myTable").rows[activeRow].style.backgroundColor = '#ffff99';}
	 
if(document.getElementById("myTable").rows[activeRow].style.backgroundColor == '#ffff99'){document.getElementById("myTable").rows[activeRow].style.backgroundColor = '#a2dd51';}}
</script>
</head><body>
<table width="100%" align="right" cellpadding="0" cellspacing="0" id="myTable">
<tr bgcolor="#A2DD51">
<td class="style8" ><input type="checkbox" alt="yellow" name="lyel1" id="lyel1" onClick="makeYel('lyel1', this,'lrow' );"></td>
</tr>
</table>
</body>
</html>

if I swap out alert(document.getElementById("myTable").rows[activeRow].bgColor); for alert(document.getElementById("myTable").rows[activeRow].style.backgroundColor); I get nothing
 
Upvote 0 Downvote

Well of course you get nothing. Your code isn't setting the style.backgroundColor anywhere at all, its setting bgcolor.

Code: 
<tr [red]bgcolor="#A2DD51"[/red]>

try:

Code: 
<tr [blue]style="background-color:#A2DD51;"[/blue]>

Then you'll see you'll get

rgb(162, 221, 81)

for your green color.

As I said above, bgcolor and style.bakcgroundColor are two different properties that just happen to alter the same visual thing on an element. But return independent values.



----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
347
lexer
lexer
coldbohemia
  • Locked
  • Question
jquery function always returns contents of the same table cell, no matter which table cell i click
Replies
0
Views
320
coldbohemia
coldbohemia
AbidingDude
  • Locked
  • Question
Where Does The &quot;name&quot; Attribute Stand?
Replies
1
Views
136
gmmastros
gmmastros
berkshirea
  • Locked
  • Question
Change the Default Pop Up Message 2
Replies
8
Views
283
berkshirea
berkshirea
obtur
  • Locked
  • Question
function below calculates day of the week for any given date. not returning correctly, plz help
Replies
2
Views
105
obtur
obtur

Part and Inventory Search

Sponsor

Back
Top