Changing the background color of a div

Welcome to BleepingComputer, a free community where people like yourself come together to discuss and learn how to use their computers. Using the site is easy and fun. As a guest, you can browse and view the various discussions in the forums, but can not create a new topic or reply to an existing one unless you are logged in. Other benefits of registering an account are subscribing to topics and forums, creating a blog, and having no ads shown anywhere on the site.

Click here to Register a free account now! or read our Welcome Guide to learn how to use this site.

Page 1 of 1

You cannot start a new topic
You cannot reply to this topic

Changing the background color of a div

#1 Ray Parrish

Member

Group: Members
Posts: 91
Joined: 30-October 08
Gender:Male
Location:Cottage Grove, Oregon

Posted 01 March 2010 - 07:42 AM

Hello,

I am trying to write a small script to change the color of a <div> with the following code, which will not work no matter how I attempt to change it. I have the script in the head of the document, and the div tag is within the body section of the document.

<script type="text/javascript">
function changecolor(Id)
{
document.getElementById(Id).style.background-color = '#FFCCCC'

}

<div id="titlebar" onclick="changecolor('titlebar');" style="position:absolute; left:200px; top:20px; margin: 0px; border: solid; height:30px; width:540px"><center>February Visitor Counts</center></div>

Could someone please help me get this to work?

Thanks for any help you can be, Ray Parrish

Later, Ray Parrish

Listen to my brilliant guitar playing !!
The Unknown Lead Player
Linux dpkg Software Report
Ray's Links, Human reviewed link index
Writings of the Schizophrenic

#2 groovicus

Hail Groovicus!

Group: Moderator
Posts: 9,522
Joined: 05-June 04
Gender:Male
Location:Centerville, SD

Posted 01 March 2010 - 09:00 AM

Try something like this: object.style.backgroundColor="#00FF00". Don't forget the semi-colon at the end, or javascript will put it where it thinks it should go, which can sometimes cause bad problems.

CSS does not map directly to java script: http://www.w3schools.com/Css/pr_background-color.asp

"Take the risk of thinking for yourself, much more happiness, truth, beauty, and wisdom will come to you that way" - Christopher Hitchens

#3 Ray Parrish

Member

Group: Members
Posts: 91
Joined: 30-October 08
Gender:Male
Location:Cottage Grove, Oregon

Posted 01 March 2010 - 07:43 PM

groovicus, on Mar 1 2010, 06:00 AM, said:

Hello again,

I've got it sort of working with the following code -

<script type="text/javascript">

function changecolor(txt) {
ColorValue= document.getElementById(txt).style.backgroundColor;
if (ColorValue = '#0000FF')
{
document.getElementById(txt).style.backgroundColor = '#FF0000';
return;
}
if (ColorValue = '#FF0000' )
{
document.getElementById(txt).style.backgroundColor = '#00FF00';
return;
}
if (ColorValue = '#00FF00')
{
document.getElementById(txt).style.backgroundColor = '#00CCFF';
return;
}
return;
}
</script>

<div class="titlebar" id="titlebar" onclick="changecolor('titlebar');" style="position:absolute; left:200px; top:20px; margin: 0px; border: solid; height:30px; width:540px"><center>February Page View Counts</center></div>

However, it will only change color once to the red in the first if block. If I take the return; statements out of the ifs, it falls all the way through, changing color at each step, and settling on the last color in the last if statement.

I tried to do several "else if" clauses but they would not trigger at all. I don't know what was wrong there as I was copying, and pasting the code for the else ifs directly from W3 Schools examples.

Why won't the function work again after the first time I click the div???

Thanks, Ray Parrish

Later, Ray Parrish

Listen to my brilliant guitar playing !!
The Unknown Lead Player
Linux dpkg Software Report
Ray's Links, Human reviewed link index
Writings of the Schizophrenic

#4 Ray Parrish

Member

Group: Members
Posts: 91
Joined: 30-October 08
Gender:Male
Location:Cottage Grove, Oregon

Posted 01 March 2010 - 08:12 PM

Hello again,

I changed the code to the folowing -

function changecolor(txt) {
ColorValue= document.getElementById(txt).style.backgroundColor;
if (ColorValue = '#0000FF') 
  {
	 document.getElementById(txt).style.backgroundColor = '#FF0000'
	 ColorValue = '#0000FF';
  } 
  if (ColorValue = '#FF0000' )
  {
	 document.getElementById(txt).style.backgroundColor = '#00CCFF'
	 ColorValue = '#0000FF';
  }
  if (ColorValue = '#00CCFF')
  {
	 document.getElementById(txt).style.backgroundColor = '#00FF00'
	 ColorValue = '#0000FF';
  }
}
</script>

With this code, the color changes to the green in the last iif statement.... How in the helll is the value of ColorValue being changed to match the lower iif statements? It should get reset to the original blue from the first iif statement,, which should prevent the other ifs from working at all. Why doesn't it???

Later, Ray Parrish

Later, Ray Parrish

Listen to my brilliant guitar playing !!
The Unknown Lead Player
Linux dpkg Software Report
Ray's Links, Human reviewed link index
Writings of the Schizophrenic

#5 groovicus

Hail Groovicus!

Group: Moderator
Posts: 9,522
Joined: 05-June 04
Gender:Male
Location:Centerville, SD

Posted 01 March 2010 - 08:52 PM

I added code tags to make your code more readable.

I am not sure what you are trying to do exactly. I can see that you are trying to change background colors, but for what purpose? There may be a different way to do what you want. Alternatively, you should step through your code using Firebug and monitor your values. My guess is that what you really want to use is 'else if' statements.

"Take the risk of thinking for yourself, much more happiness, truth, beauty, and wisdom will come to you that way" - Christopher Hitchens

#6 Ray Parrish

Member

Group: Members
Posts: 91
Joined: 30-October 08
Gender:Male
Location:Cottage Grove, Oregon

Posted 01 March 2010 - 09:06 PM

Hello again,

I changed the code to the following - as you can see now my ifs do not match each other in a row, as a matter of fact, the value that ColorValue is set to after the first iif does NOT re-occur in the iif chain below anywhere. With that said, this code stubbornly refuses to change the color to anything but green, which is set iin the last iif statement,, which should not even be firing, as the starting color is #0000FF or blue.

Why in the world is javascript so buggy??? Why does it stubbornly keep getting into the last if statement, even 'though the value of ColorValue is never set to the value that last if statement is supposed to be matching???

<script type="text/javascript">

function changecolor(txt) {
ColorValue= document.getElementById(txt).style.backgroundColor;
if (ColorValue = '#0000FF')
{
ColorValue= '#FF0000';

}
if (ColorValue = '#00CCFF' )
{
ColorValue= '#00FFFF';

}
if (ColorValue = '#FFFF00')
{
ColorValue= '#00FF00';

}
document.getElementById(txt).style.backgroundColor = ColorValue;
}
</script>

Please help me figure this out. I never have this problem with Python, or bash.

Later, Ray Parrish

Later, Ray Parrish

Listen to my brilliant guitar playing !!
The Unknown Lead Player
Linux dpkg Software Report
Ray's Links, Human reviewed link index
Writings of the Schizophrenic

#7 Ray Parrish

Member

Group: Members
Posts: 91
Joined: 30-October 08
Gender:Male
Location:Cottage Grove, Oregon

Posted 01 March 2010 - 09:39 PM

groovicus, on Mar 1 2010, 05:52 PM, said:

I couldn't even get an else iif statement to work. I copied it very carefully from the W3 Schools site, and the else clauses would not fire.

What I want to do, once I can figure out why the hell if statements act so weird in JavaScript, is to write a function that when any elements onclick() routine calls it, it will cycle that elements background color through a set of pre-selected colors, one color for each click.

I tried a witch statement, and evidently they only work with integer values, not strings, so that was fruitless.

I tried to put break statements into the ifs to stop the function after successfully entering an if statement, but then the code would not run at all for some reason.

Later, Ray Parrish

Later, Ray Parrish

Listen to my brilliant guitar playing !!
The Unknown Lead Player
Linux dpkg Software Report
Ray's Links, Human reviewed link index
Writings of the Schizophrenic

#8 groovicus

Hail Groovicus!

Group: Moderator
Posts: 9,522
Joined: 05-June 04
Gender:Male
Location:Centerville, SD

Posted 01 March 2010 - 09:44 PM

Javascript is an incredibly stable language, and is not anything like python, or anything at all like shell scripting. However, it does some weird things sometimes.

Again, you should not be using multiple if statements for related code. You should be using if, else if statements.

if{
   //do something
} else if{
   //do something else
}

DOH!

I see the problem now. This:
if (ColorValue = '#FFFF00')
is not a comparison. You made an assignment. To make a comparison in any language, you need to know what their comparison operators are. Ruby uses '==', Java uses '==', C# uses '==', and javascript does things a bit differently. If you were to do what you did in Ruby, you would have the exact same problem.

It would also be helpful to use code tags when inserting code so that we can read it. [ code ] [ /code ]

Sorry I didn't see the problem sooner.

"Take the risk of thinking for yourself, much more happiness, truth, beauty, and wisdom will come to you that way" - Christopher Hitchens

#9 Ray Parrish

Member

Group: Members
Posts: 91
Joined: 30-October 08
Gender:Male
Location:Cottage Grove, Oregon

Posted 01 March 2010 - 11:55 PM

groovicus, on Mar 1 2010, 06:44 PM, said:

if{
   //do something
} else if{
   //do something else
}

OK dokey, I'm using the proper comparison operator now, but have discovered that the line which is supposed to get the ColorValue is returning a null value, so there is something wrong with it.

Hereis the offending line -

ColorValue= document.getElementById(txt).style.backgroundColor;

txt in that call is a variable which gets passed into the function from the onclck() call, and it is set to "titlebar". I can successfully get the nnerHTML for the titlebar element with this command -

html= document.getElementById(txt).innerHTML;

I've tried removing the word "style" from the first line to no avail, and also tried changing "backgroundColor" to "background-color", but when I do that the script won't do a thing.

The null value evidently matches anything, as when it is returned, the first if statement in the chain fires, and I get informed that we are changing from red to green by my alert statement, although the initial color is bue, not red.

Is there perhaps a slightly different command to query the background color of an element that I could use?

Later, Ray Parrish

Later, Ray Parrish

Listen to my brilliant guitar playing !!
The Unknown Lead Player
Linux dpkg Software Report
Ray's Links, Human reviewed link index
Writings of the Schizophrenic

#10 Ray Parrish

Member

Group: Members
Posts: 91
Joined: 30-October 08
Gender:Male
Location:Cottage Grove, Oregon

Posted 01 March 2010 - 11:57 PM

Hello again,

I gave up on querying the current color, and just wrote a little code which cycles the clors based on the value of an integer counter. It works just great, and wil uffice for what I want to do. Here is my code -

<script type="text/javascript">
Counter = 1;
function changecolor(txt) {
switch (Counter)
  {
 case 1:
	 document.getElementById(txt).style.backgroundColor = "#00ff00";
	 Counter = Counter + 1;
	 break;
 case 2:
	 document.getElementById(txt).style.backgroundColor = "#ff0000";
	 Counter = Counter + 1;
	 break;
  case 3:
	 document.getElementById(txt).style.backgroundColor = "#0000ff";
	 Counter = Counter + 1;
	 break;
  case 4:
	 document.getElementById(txt).style.backgroundColor = "#00ffff";
	 Counter = Counter + 1;
	 break;
  case 5:
	 document.getElementById(txt).style.backgroundColor = "#ff00ff";
	 Counter = 1;
	 break;
  }
}
</script>

Later, Ray Parrish

Later, Ray Parrish

Listen to my brilliant guitar playing !!
The Unknown Lead Player
Linux dpkg Software Report
Ray's Links, Human reviewed link index
Writings of the Schizophrenic

#11 groovicus

Hail Groovicus!

Group: Moderator
Posts: 9,522
Joined: 05-June 04
Gender:Male
Location:Centerville, SD

Posted 02 March 2010 - 10:21 AM

Quote

ColorValue= document.getElementById(txt).style.backgroundColor;

Right, because that just gets the attribute associated with the background color, You didn't actually get the value, which would have been:
ColorValue= document.getElementById(txt).style.backgroundColor.value;

Your code now is ok, but you are keeping a global variable to track the state, and global variables, especially ones not properly declared, is almost always a bad idea. :thumbsup: