...

View Full Version : Dynamic Colors



ziggy1621
07-28-2011, 03:50 PM
I want to have <div> cells that the background-color css style dynamically change between 4 colors depending on how many times they are clicked. The options are none, yellow, red and green then repeat. So when the page loads, they are all at none, and if you click once it goes to green, twice to yellow, three times to red, then back to none.

I do not know if this is possible, but if anyone can point me to a tutorial, I would be appreciative. I just am having a hard time searching the proper terms.

devnull69
07-28-2011, 04:03 PM
This is actually quite easy

HTML:


<div class="bgchanger">Whatever the text may be</div>
...


Javascript:


var myBgChangers = document.getElementsByClassName('bgchanger');
for(i=0; i<myBgChangers.length; i++) {
if(window.addEventListener) {
myBgChangers[i].addEventListener('click', changeBgColor, false);
} else {
myBgChangers[i].attachEvent('onclick', changeBgColor);
}
}

function changeBgColor() {
// this function will be triggered each time one of the div's with class "bgchanger" is being clicked ... "this" is a reference to the current element
switch(this.style.backgroundColor) {
case "" : this.style.backgroundColor = "green"; break;
case "green" : this.style.backgroundColor = "yellow"; break;
case "yellow" : this.style.backgroundColor = "red"; break;
case "red" : this.style.backgroundColor = ""; break;
}
}

ziggy1621
07-28-2011, 04:23 PM
Hmm, looks good, but I'm not getting the color changes...



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" language="javascript">
var myBgChangers = document.getElementsByClassName('bgchanger');
for(i=0; i<myBgChangers.length; i++) {
if(window.addEventListener) {
myBgChangers[i].addEventListener('click', changeBgColor, false);
} else {
myBgChangers[i].attachEvent('onclick', changeBgColor);
}
}

function changeBgColor() {
// this function will be triggered each time one of the div's with class "bgchanger" is being clicked ... "this" is a reference to the current element
switch(this.style.backgroundColor) {
case "" : this.style.backgroundColor = "green"; break;
case "green" : this.style.backgroundColor = "yellow"; break;
case "yellow" : this.style.backgroundColor = "red"; break;
case "red" : this.style.backgroundColor = ""; break;
}
}
</script>
</head>

<body>
<div class="bgchanger">Whatever the text may be</div>
</body>
</html>

Krupski
07-28-2011, 05:42 PM
Hmm, looks good, but I'm not getting the color changes...


...because it had a few minor errors. This one works:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">

var myBgChangers = document.getElementsByClassName('bgchanger');
for(i=0; i<myBgChangers.length; i++) {
if(window.addEventListener) {
myBgChangers[i].addEventListener('click', changeBgColor, false);
} else {
myBgChangers[i].attachEvent('onclick', changeBgColor);
}
}

function changeBgColor(a) {
// this function will be triggered each time one of the div's with class "bgchanger" is being clicked ... "this" is a reference to the current element
switch(a.style.backgroundColor) {
case "" : a.style.backgroundColor = "green"; break;
case "green" : a.style.backgroundColor = "yellow"; break;
case "yellow" : a.style.backgroundColor = "red"; break;
case "red" : a.style.backgroundColor = ""; break;
}
}
</script>
</head>

<body>
<div class="bgchanger" onclick="changeBgColor(this)">Whatever the text may be</div>
</body>
</html>

ziggy1621
07-28-2011, 05:49 PM
Thanks brother. I'm a PHP guy, so I've been spinning my head. Thanks aton!

devnull69
07-28-2011, 09:24 PM
The main reason was that you should have added my code to a window.onload event handler ... because you can only attach/add event listeners to existing elements.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum