Changing color of cell based on number of clicks

I’m brand new to javascript but I’ve had a go at this, from bits picked up from google and my general knowledge of coding practice from PHP:

<script type="text/javascript">	
var count = 0;
		function countClicks(c){
			count +=1;
				c = count;
		
		if(c == 1){
	
    	function ColorChange(obj){
			obj.style.color='#FFFFFF';
			obj.style.backgroundColor='#66CC33';
			obj.parentNode.style.backgroundColor='#66CC33';
		}
		
		}
		
		if (c == 2){
		
		function ColorChange(obj){
			obj.style.color='#FFFFFF';
			obj.style.backgroundColor='#FF0000';
			obj.parentNode.style.backgroundColor='#FF0000';
		
		}
		}
		
		if (c == 3){
		
		function ColorChange(obj){
			obj.style.color='#FFFFFF';
			obj.style.backgroundColor='#FFCC33';
			obj.parentNode.style.backgroundColor='#FFCC33';
		}
		}
	}
</script>

Can someone tell me just how wrong i am!

many thanks.

Why not just set the default style to be as per the 4th click, so when the page first loads it has the necessary colours?

Hi Gumape,

Many thanks for your response!

I managed to get a half working thing going with this:

	<script type="text/javascript">	
	var count = 0;
	function countClicks(obj){
		count +=1;
			if (count >3) {count = 0}

		if(count == 1){
			obj.style.color='#FFFFFF';
			obj.style.backgroundColor='#66CC33';
			obj.parentNode.style.backgroundColor='#66CC33';
		}
		
		if (count == 2){
			obj.style.color='#FFFFFF';
			obj.style.backgroundColor='#FF0000';
			obj.parentNode.style.backgroundColor='#FF0000';
		}
		
		if (count == 3){
			obj.style.color='#FFFFFF';
			obj.style.backgroundColor='#FFCC33';
			obj.parentNode.style.backgroundColor='#FFCC33';
		}

		if (count == 0){
			obj.style.backgroundColor='#EEEEEE';
			obj.parentNode.style.backgroundColor='#EEEEEE';
		}
	}
</script>

echo "<td id = \\"td1\\" align=\\"center\\" bgcolor=\\"#EEEEEE\\" onclick = countClicks(this)>$day_num</td>";

the problem being that the count is course global, so if I click one cell it will go green (great) if i click it a completely different cell then it will go red instead of green (not so great)…

Does your method solve this problem?

many thanks,

greens85

I created a small example, i hope it will be a good start point for you:

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<script type="text/javascript">	
			var count = 0;
			function CountClicks () {
				count ++;
				ColorChange (count % 3);  // modulo 3
			}

			function ColorChange (countMod3){
				var cell = document.getElementById ("mycell");
				switch (countMod3) {
				case 0:
					cell.style.color='#FFFFFF';
					cell.style.backgroundColor='#66CC33';
					cell.parentNode.style.backgroundColor='#FF0000';
					break;
				case 1:
					cell.style.color='#FFFFFF';
					cell.style.backgroundColor='#FF0000';
					cell.parentNode.style.backgroundColor='#00FF00';
					break;
				case 2:
					cell.style.color='#FFFFFF';
					cell.style.backgroundColor='#FFCC33';
					cell.parentNode.style.backgroundColor='#0000FF';
					break;
				}
			}
	</script>
</head>
<body>
	<table border="3px">
		<tr>
			<td onclick="CountClicks ()" id="mycell">First cell, click on me!</td>
			<td>Second cell</td>
			<td>Third cell</td>
		</tr>
		<tr>
			<td>Second row, first cell</td>
			<td>Second row, second cell</td>
			<td>Second row, third cell</td>
		</tr>
	</table>
</body>

When the user clicks on the first cell of the table, the CountClicks method is invoked. The CountClicks method increases the value of the count global variable by one and calls the ColorChange method with the number of counts modulo 3.

If you need similar examples or detailed description about the onclick event, getElementById method and the modulus operator, see the following pages:
onclick event,
getElementById method,
modulus operator.

Ah so simple, can’t believe I didnt see it!

Many thanks for all of your help.

Much appreciated! :slight_smile:

your code will work if you modify the following line:

if (obj.count > 3) {obj.count = 1};

to

if (obj.count > 4) {obj.count = 1};

If I understand well, you need to count the clicks by cell.
In that case, add a custom property to each cell instead of using the global count variable:

		function countClicks (obj){
			if (!obj.count) {
				obj.count = 0;
			}

			obj.count++;
			if (obj.count > 3) {obj.count = 1};

			if(obj.count == 1){
				obj.style.color='#FFFFFF';
				obj.style.backgroundColor='#66CC33';
				obj.parentNode.style.backgroundColor='#66CC33';
			}
			
			if (obj.count == 2){
				obj.style.color='#FFFFFF';
				obj.style.backgroundColor='#FF0000';
				obj.parentNode.style.backgroundColor='#FF0000';
			}
			
			if (obj.count == 3){
				obj.style.color='#FFFFFF';
				obj.style.backgroundColor='#FFCC33';
				obj.parentNode.style.backgroundColor='#FFCC33';
			}
		}

Sorry to resurrect this but I missed an important part…

If the click count has never been set and the form is submitted I also need it to return ‘Not Set’ as per what it does on 4 clicks:

I have tired this, but had no luck:

if (obj.count == 0){
                obj.style.color='#000000';
                obj.style.backgroundColor='#FFFFFF';
                obj.parentNode.style.backgroundColor='#FFFFFF';
				document.getElementById(obj.title).value='Not Set';
            }

The current code in full:

<script type="text/javascript">	
	function countClicks (obj){
            if (!obj.count) {
                obj.count = 0;
            }
 
            obj.count++;
            if (obj.count > 4) {obj.count = 1};
 
            if(obj.count == 1){
                obj.style.color='#FFFFFF';
                obj.style.backgroundColor='#66CC33';
                obj.parentNode.style.backgroundColor='#66CC33';
				document.getElementById(obj.title).value='Available';
			}
           
            if (obj.count == 2){
                obj.style.color='#FFFFFF';
                obj.style.backgroundColor='#FF0000';
                obj.parentNode.style.backgroundColor='#FF0000';
				document.getElementById(obj.title).value='Not Available';
			}
           
            if (obj.count == 3){
                obj.style.color='#FFFFFF';
                obj.style.backgroundColor='#FFCC33';
                obj.parentNode.style.backgroundColor='#FFCC33';
				document.getElementById(obj.title).value='Working';
            }
			
			if (obj.count == 4){
                obj.style.color='#000000';
                obj.style.backgroundColor='#FFFFFF';
                obj.parentNode.style.backgroundColor='#FFFFFF';
				document.getElementById(obj.title).value='Not Set';
            }
        }
</script>

Any chance someone could advise?

Many thanks,

Greens85

Yep, thats exactly what I want, and that’s almost working perfectly. I say almost because I need it on the 4th click to go back to the original colour.

I have tried adding the following code:


if (obj.count == 4){
                obj.style.color='#000000';
                obj.style.backgroundColor='#EEEEEE';
                obj.parentNode.style.backgroundColor='#EEEEEE';
            }

but it doesnt seem to work, and just goes back to green.

Any ideas what I’m doing wrong?