Jump to content


 


Register a free account to unlock additional features at BleepingComputer.com
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.

Photo

Changing the background color of a div


  • Please log in to reply
10 replies to this topic

#1 Ray Parrish

Ray Parrish

  • Members
  • 91 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Cottage Grove, Oregon
  • Local time:06:34 AM

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

BC AdBot (Login to Remove)

 


#2 groovicus

groovicus

  • Security Colleague
  • 9,963 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Centerville, SD
  • Local time:08:34 AM

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

#3 Ray Parrish

Ray Parrish
  • Topic Starter

  • Members
  • 91 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Cottage Grove, Oregon
  • Local time:06:34 AM

Posted 01 March 2010 - 07:43 PM

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


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

#4 Ray Parrish

Ray Parrish
  • Topic Starter

  • Members
  • 91 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Cottage Grove, Oregon
  • Local time:06:34 AM

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

#5 groovicus

groovicus

  • Security Colleague
  • 9,963 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Centerville, SD
  • Local time:08:34 AM

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.

#6 Ray Parrish

Ray Parrish
  • Topic Starter

  • Members
  • 91 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Cottage Grove, Oregon
  • Local time:06:34 AM

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

#7 Ray Parrish

Ray Parrish
  • Topic Starter

  • Members
  • 91 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Cottage Grove, Oregon
  • Local time:06:34 AM

Posted 01 March 2010 - 09:39 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.


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

#8 groovicus

groovicus

  • Security Colleague
  • 9,963 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Centerville, SD
  • Local time:08:34 AM

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.

#9 Ray Parrish

Ray Parrish
  • Topic Starter

  • Members
  • 91 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Cottage Grove, Oregon
  • Local time:06:34 AM

Posted 01 March 2010 - 11:55 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.



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

#10 Ray Parrish

Ray Parrish
  • Topic Starter

  • Members
  • 91 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Cottage Grove, Oregon
  • Local time:06:34 AM

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

#11 groovicus

groovicus

  • Security Colleague
  • 9,963 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Centerville, SD
  • Local time:08:34 AM

Posted 02 March 2010 - 10:21 AM

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:




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users