JavaScript Does Not Want To Change A CSS Property

  • Thread starter Thread starter Nathan Sokalski
  • Start date Start date
N

Nathan Sokalski

I seem to have run into a problem using JavaScript/CSS that seems very
strange. Here is a script that I used in two pages of mine:


<script type="text/javascript">
var currpeg="PegCell0";
function pickcolor(color)
{
eval(currpeg+".style.backgroundColor=color");
//eval(currpeg+".style.height='100px'");
//window.alert("PegCell0.style.backgroundColor="+PegCell0.style.backgroundColor);
return true;
}
</script>


The script does exactly what it should and I want it to in the one page
(changes the background color of PegCell0), but it does not in the other.
However, if I uncomment the two lines that are commented out, it will change
the height, and the alert box does show whatever value was passed as the
"color" parameter. NOTE: When I call the function, I use the following code:

onClick="return pickcolor(this.style.backgroundColor);"

So I know that I am passing the values, because as you can see I have
checked using the window.alert(), and I am using the right style object
because when I try to change the height property it works. I am testing both
of these pages on the same computer with the same browser and settings (IE
6.0 on Windows XP). What might I be doing wrong? Thanks.
 
Nathan Sokalski said:
I seem to have run into a problem using JavaScript/CSS that seems very
strange. Here is a script that I used in two pages of mine:


<script type="text/javascript">
var currpeg="PegCell0";
function pickcolor(color)
{
eval(currpeg+".style.backgroundColor=color");
//eval(currpeg+".style.height='100px'");
//window.alert("PegCell0.style.backgroundColor="+PegCell0.style.backgroundCo
lor);
return true;
}
</script>


The script does exactly what it should and I want it to in the one page
(changes the background color of PegCell0), but it does not in the other.
However, if I uncomment the two lines that are commented out, it will change
the height, and the alert box does show whatever value was passed as the
"color" parameter. NOTE: When I call the function, I use the following code:

onClick="return pickcolor(this.style.backgroundColor);"

So I know that I am passing the values, because as you can see I have
checked using the window.alert(), and I am using the right style object
because when I try to change the height property it works. I am testing both
of these pages on the same computer with the same browser and settings (IE
6.0 on Windows XP). What might I be doing wrong? Thanks.
Click to expand...

Don't use eval it's ugly.

try:-

document.getElementById(currpeg).style.backgroundColor = color
 
Nathan said:
var currpeg="PegCell0";
function pickcolor(color)
{
eval(currpeg+".style.backgroundColor=color");
//eval(currpeg+".style.height='100px'");

//window.alert("PegCell0.style.backgroundColor="+PegCell0.style.backgroundColor);
return true;
}

The script does exactly what it should and I want it to in the
one page (changes the background color of PegCell0), but it does
not in the other...
...What might I be doing wrong?
Click to expand...

Anthony is correct, but not because eval is ugly. When you use eval, you
open a compiler. So learn to function without it.

To make matters worse, you are treating PegCell0 as a variable name instead
of using the appropriate DOM method to obtain an object reference. No
surprise that it compares badly to an ACTUAL object reference ("this", when
bound to an event handler). Once again, Anthony made the correct suggestion:
use document.getElementById.

As for the question of why this piece of code works in one page but not in
another, there are countless possibilities, including (a) declaring a
variable named PegCell0, (b) violation of the uniqueness constraint on ID,
(c) declaring a form element with NAME="PegCell0", or (d) using different
DOCTYPE declarations.

This last example could happen if the "nonworking" page had a strict
DOCTYPE, and you passed a color like "006699" instead of "#006699".
 
The reason I did not use document.getElementById is because I have read
articles that say it is for IE only, and it works only for elements that
CANNOT have a name attribute. I wanted to give the entire DOM method, but I
could not figure out what it was for "PegCell0", which is a TD tag. But
also, your suggestion as to the DOCTYPE being the reason for the code not
working doesn't make sense, because the value for the color parameter is
passed using

onClick="return pickcolor(this.style.backgroundColor);"

from within another TD that has it's background color specified using CSS,
and that color displays like it should (I will also note that the colors in
my code are done using named colors, not hexidecimal values, so I know it is
not related to the # sign). Any other ideas? Thanks.
 
Nathan said:
The reason I did not use document.getElementById is because
I have read articles that say it is for IE only, and it works
only for elements that CANNOT have a name attribute.
Click to expand...

Good Heavens, who told you that?

Interface Document
Methods
getElementById introduced in DOM Level 2
Returns the Element whose ID is given by elementId. If
no such element exists, returns null. Behavior is not
defined if more than one element has this ID.

http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-getElBId


I wanted to give the entire DOM method, but I could not
figure out what it was for "PegCell0", which is a TD tag.
Click to expand...

If the cell has ID="PegCell0", then it is:

document.getElementById("PegCell0")

Nothing more, nothing less. Note that ID is case-sensitive, according to the
HTML specification:
http://www.w3.org/TR/html401/struct/global.html#adef-id



But also, your suggestion as to the DOCTYPE being the
reason for the code not working doesn't make sense,
because the value for the color parameter is passed using

onClick="return pickcolor(this.style.backgroundColor);"
Click to expand...

It isn't my fault you provided so few details that I had to make a
laundry-list of possible causes. And by the way, you are returning values
for no reason whatsoever. You always return true, so why bother returning
anything at all?



Any other ideas?
Click to expand...

Yes, but I will keep them to myself until I know which one you need. That
appears to be the way you want it.
 
Nathan said:
The reason I did not use document.getElementById is because I have read
articles that say it is for IE only, and it works only for elements that
CANNOT have a name attribute.
Click to expand...

Early versions of IE did not support getElementById. Instead they used
document.all. Perhaps this is what you are thinking of. Here is a
JavaScript function I wrote and use extensively that returns the object
associate with an ID. It first tries to use getElementById; failing
this it tries document.all; failing this it returns null.

function getObject ( id )
{
if ( id == "" )
return( null );
if ( document.getElementById && (obj = document.getElementById(id)) )
;
else if ( document.all && (obj = document.all[id]) )
;
else /* DOM not supported, or no object */
return( null );
return( obj );
}
 
I guess I was wrong about it being IE only, but here is the site I got the
other stuff from:

http://www.javascriptjedi.com/getElementById/

Because I have never used the getElementById() function before, I am not
trusting the site anymore than anywhere or anyone else. However, when I
tried using the following line:

document.getElementById("PegCell0").style.backgroundColor=color;

I did not notice any difference in the results. Here is the code from the
working page of mine that uses my original JavaScript function:


<html>
<head>
<script type="text/javascript">
var currpeg="testcell0";
function pickcolor(color)
{
eval(currpeg+".style.backgroundColor=color");
return true;
}
</script>
</head>
<body background="C:\personal\multimedia\rainbow.gif">
<table>
<tr>
<td id="testcell0"
style="background-color:Blue;border-width:0px;height:29px;width:29px;"
onClick="currpeg=this.id;"></td>
<td id="testcell1"
style="background-color:Gray;border-width:0px;height:29px;width:29px;"
onClick="currpeg=this.id;"></td>
<td id="testcell2"
style="background-color:Green;border-width:0px;height:29px;width:29px;"
onClick="currpeg=this.id;"></td>
<td id="testcell3"
style="background-color:Orange;border-width:0px;height:29px;width:29px;"
onClick="currpeg=this.id;"></td>
<td id="testcell4"
style="background-color:Purple;border-width:0px;height:29px;width:29px;"
onClick="currpeg=this.id;"></td>
</tr>
</table>
<table>
<tr>
<td style="background-color:Gray;height:29px;width:29px;"
onClick="return pickcolor(this.style.backgroundColor);"></td>
<td style="background-color:Green;height:29px;width:29px;"
onClick="return pickcolor(this.style.backgroundColor);"></td>
</tr>
<tr>
<td style="background-color:Orange;height:29px;width:29px;"
onClick="return pickcolor(this.style.backgroundColor);"></td>
<td style="background-color:Purple;height:29px;width:29px;"
onClick="return pickcolor(this.style.backgroundColor);"></td>
</tr>
</table>
</body>
</html>


The page that is not working uses the same events/javascript, just slightly
different variable/id names, which I have checked more times than I can even
count. As you can see, clicking a cell in the first table chooses which
cell's background will get changed (testcell0 is set as the default), and
clicking a cell in the second table chooses what color to change it to.
Thank you for your help, but unfortunately I am not yet to mission
accomplished.
 
Thank you all for your help, I have found the problem, which wasn't really
JavaScript or CSS at all. I had a background="someimage.gif" attribute,
which was covering up the CSS property. I thought that the CSS was on top,
but I guess I was wrong. Thank you all for your help, and mission
accomplished!
--
Nathan Sokalski
(e-mail address removed)
http://www.nathansokalski.com/

C A Upsdell said:
Nathan said:
The reason I did not use document.getElementById is because I have read
articles that say it is for IE only, and it works only for elements that
CANNOT have a name attribute.
Click to expand...

Early versions of IE did not support getElementById. Instead they used
document.all. Perhaps this is what you are thinking of. Here is a
JavaScript function I wrote and use extensively that returns the object
associate with an ID. It first tries to use getElementById; failing this
it tries document.all; failing this it returns null.

function getObject ( id )
{
if ( id == "" )
return( null );
if ( document.getElementById && (obj = document.getElementById(id)) )
;
else if ( document.all && (obj = document.all[id]) )
;
else /* DOM not supported, or no object */
return( null );
return( obj );
}
Click to expand...
 
Nathan said:
I guess I was wrong about it being IE only, but here is the
site I got the other stuff from:

http://www.javascriptjedi.com/getElementById/
Click to expand...

That site describes a well-known flaw in Internet Explorer's
*IMPLEMENTATION* of document.getElementById(). But it is an easily avoidable
bug (keep IDs unique within the document name/id-space).


Here is the code from the working page of mine that uses my
original JavaScript function:
[trimmed for brevity]
Click to expand...

You're halfway there. Now show an example that does not work. Here is an
alternative approach. I have omitted the style definitions for readability:

function setColor(src) {
window.tgt = window.tgt || document.getElementById("testcell0")
window.tgt.style.backgroundColor = src.style.backgroundColor
}

<table>
<tr><td id="testcell0" onclick="window.tgt=this"></td>
<td onclick="window.tgt=this"></td>
<td onclick="window.tgt=this"></td>
<td onclick="window.tgt=this"></td>
</tr><tr>
<td onclick="setColor(this)"></td>
<td onclick="setColor(this)"></td>
<td onclick="setColor(this)"></td>
<td onclick="setColor(this)"></td>
<td onclick="setColor(this)"></td>
</tr>
</table>

Note that there is no ambiguity about which object is which here, and no
need to use the eval kludge. The only cell that needs an ID is the "default"
target cell. Once the global (window) variable holds a value, no IDs are
needed.
 
Back
Top