Help Incorporating previously set value into existing JS function

Hi all,

I have an existing JavaScript function that cycles through a bunch of colors depending on how many clicks of the mouse made.

The all works fine, but I have since my code a little more complex, so now the colors are remembered once the user goes back to this page… this is done with PHP and mySQL. The problem is that, once they go back the color may be red (2nd in the cycle), meaning next click they would expect to see orange, but the click counter is back to 0 so they actually see green.

The code is:

<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>

This is the PHP & mySQL that remembers what color was previously selected…

// If they have previously set their availability to available - make the cell green
				if($Availability == 'Available'){
			 		echo "<td id = \\"td1\\" align=\\"center\\" class=\\"today2\\" bgcolor=\\"#66CC33\\">
			      		  <a title=\\"availability_$day_num\\" href=\\"#\\" onclick=\\"countClicks(this);\\">
						  <font color=\\"white\\">$day_num</font></a></td>";
						  echo "<input type=\\"hidden\\" name=\\"availability_$day_num\\" id=\\"availability_$day_num\\" value=\\"\\">"; 
				// If they have previously set their availability to not available - make the cell red
				}elseif ($Availability == 'Not Available'){	
					echo "<td id = \\"td1\\" align=\\"center\\" class=\\"today2\\" bgcolor=\\"#FF0000\\">
			      		  <a title=\\"availability_$day_num\\" href=\\"#\\" onclick=\\"countClicks(this);\\">
						  <font color=\\"white\\">$day_num</font></a></td>";
						  echo "<input type=\\"hidden\\" name=\\"availability_$day_num\\" id=\\"availability_$day_num\\" value=\\"\\">"; 
				// If they have previously set their availability to Working - make their cell orange
				}elseif ($Availability == 'Working'){
					echo "<td id = \\"td1\\" align=\\"center\\" class=\\"today2\\" bgcolor=\\"#FFCC33\\">
			      		  <a title=\\"availability_$day_num\\" href=\\"#\\" onclick=\\"countClicks(this);\\">
						  <font color=\\"white\\">$day_num</font></a></td>";
						  echo "<input type=\\"hidden\\" name=\\"availability_$day_num\\" id=\\"availability_$day_num\\" value=\\"\\">"; 
				// Otherwise they haven't set their availability, make the cell white 
				}else{
					echo "<td id = \\"td1\\" align=\\"center\\" class=\\"today\\">
			     		  <a title=\\"availability_$day_num\\" href=\\"#\\" onclick=\\"countClicks(this);\\">$day_num</a></td>";
						  echo "<input type=\\"hidden\\" name=\\"availability_$day_num\\" id=\\"availability_$day_num\\" value=\\"\\">"; 
				}

Can anyone help me modify the JavaScript function so that it cycles in the correct sequence?

many thanks,

Greens85

Noticed a slight problem with this, although to be honest i’m not sure if it is a Javascript or PHP issue…

I can submit the colors fine, then when I revisit the page all colors are as before but if I then resubmit the calendar without re-clicking anything it submits as white rather than the color is was!

Can anyone tell me whats going wrong here:


<script type="text/javascript">	
	function countClicks (obj){
			
			if (obj.count === undefined) {
        		obj.count = obj.getAttribute ("count");
    		}	
 
            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>
// If the day is today then give it a bigger border
			if($day_num == $day){
				
				// If they have previously set their availability to available - make the cell green
				if($Availability == 'Available'){
			 		echo "<td id = \\"td1\\" align=\\"center\\" class=\\"today2\\" bgcolor=\\"#66CC33\\" class=\\"white\\">
			      		  <a title=\\"availability_$day_num\\" href=\\"#\\" count=\\"1\\" onclick=\\"countClicks(this);\\">$day_num</a></td>";
						  echo "<input type=\\"hidden\\" name=\\"availability_$day_num\\" id=\\"availability_$day_num\\" value=\\"\\">"; 
				// If they have previously set their availability to not available - make the cell red
				}elseif ($Availability == 'Not Available'){	
					echo "<td id = \\"td1\\" align=\\"center\\" class=\\"today2\\" bgcolor=\\"#FF0000\\">
			      		  <a title=\\"availability_$day_num\\" href=\\"#\\" count=\\"2\\" onclick=\\"countClicks(this);\\">$day_num</a></td>";
						  echo "<input type=\\"hidden\\" name=\\"availability_$day_num\\" id=\\"availability_$day_num\\" value=\\"\\">"; 
				// If they have previously set their availability to Working - make their cell orange
				}elseif ($Availability == 'Working'){
					echo "<td id = \\"td1\\" align=\\"center\\" class=\\"today2\\" bgcolor=\\"#FFCC33\\">
			      		  <a title=\\"availability_$day_num\\" href=\\"#\\" count=\\"3\\" onclick=\\"countClicks(this);\\">$day_num</a></td>";
						  echo "<input type=\\"hidden\\" name=\\"availability_$day_num\\" id=\\"availability_$day_num\\" value=\\"\\">"; 
				// Otherwise they haven't set their availability, make the cell white 
				}else{
					echo "<td id = \\"td1\\" align=\\"center\\" class=\\"today\\">
			     		  <a title=\\"availability_$day_num\\" href=\\"#\\" count=\\"0\\" onclick=\\"countClicks(this);\\">$day_num</a></td>";
						  echo "<input type=\\"hidden\\" name=\\"availability_$day_num\\" id=\\"availability_$day_num\\" value=\\"\\">"; 
				}

Hi Gumape,

Thanks for the response…

I can see that you are right in that the value is blank.

However what is concerning is that I was developing this in another part of the site and it works without adding $availability into the hidden field!

Not sure why, or how… as I’m pretty sure i copied and pasted the code over!

Anyway I will give your suggestion a try :slight_smile:

Many thanks

It is a PHP issue. The problem is that the values of the hidden inputs are always initially blank. They must be set to the current colors:

// If the day is today then give it a bigger border

            if($day_num == $day){

                
                // If they have previously set their availability to available - make the cell green

                if($Availability == 'Available'){

                     echo "<td id = \\"td1\\" align=\\"center\\" class=\\"today2\\" bgcolor=\\"#66CC33\\" class=\\"white\\">

                            <a title=\\"availability_$day_num\\" href=\\"#\\" count=\\"1\\" onclick=\\"countClicks(this);\\">$day_num</a></td>";

                // If they have previously set their availability to not available - make the cell red

                }elseif ($Availability == 'Not Available'){    

                    echo "<td id = \\"td1\\" align=\\"center\\" class=\\"today2\\" bgcolor=\\"#FF0000\\">

                            <a title=\\"availability_$day_num\\" href=\\"#\\" count=\\"2\\" onclick=\\"countClicks(this);\\">$day_num</a></td>";

                // If they have previously set their availability to Working - make their cell orange

                }elseif ($Availability == 'Working'){

                    echo "<td id = \\"td1\\" align=\\"center\\" class=\\"today2\\" bgcolor=\\"#FFCC33\\">

                            <a title=\\"availability_$day_num\\" href=\\"#\\" count=\\"3\\" onclick=\\"countClicks(this);\\">$day_num</a></td>";

                // Otherwise they haven't set their availability, make the cell white 

                }else{

                    echo "<td id = \\"td1\\" align=\\"center\\" class=\\"today\\">

                           <a title=\\"availability_$day_num\\" href=\\"#\\" count=\\"0\\" onclick=\\"countClicks(this);\\">$day_num</a></td>";
                } 

                echo "<input type=\\"hidden\\" name=\\"availability_$day_num\\" id=\\"availability_$day_num\\" value=\\"$Availability\\">"; 

Now tried this Gumape…

works like a treat!

Many thanks for your help!

Just looking at this again, I’m no Javascript expert but could it because it has an onclick event handler… i.e. nothing is going to register until a click is made so even though it comes back the correct color and has the correct count value… the hidden field value will actually be blank?

Hi Gumape,

Sorry for the very delayed response to this one… but just to let you know it works perfectly!

Thanks so much for your help :slight_smile:

Greens85

Hi Greens,

set an initial value for the count attribute of each anchor in your php code:

// If they have previously set their availability to available - make the cell green

                if($Availability == 'Available'){

                     echo "<td id = \\"td1\\" align=\\"center\\" class=\\"today2\\" bgcolor=\\"#66CC33\\">

                            <a title=\\"availability_$day_num\\" href=\\"#\\" count=\\"1\\" onclick=\\"countClicks(this);\\">

                          <font color=\\"white\\">$day_num</font></a></td>";

                          echo "<input type=\\"hidden\\" name=\\"availability_$day_num\\" id=\\"availability_$day_num\\" value=\\"\\">"; 

                // If they have previously set their availability to not available - make the cell red

                }elseif ($Availability == 'Not Available'){    

                    echo "<td id = \\"td1\\" align=\\"center\\" class=\\"today2\\" bgcolor=\\"#FF0000\\">

                            <a title=\\"availability_$day_num\\" href=\\"#\\" count=\\"2\\" onclick=\\"countClicks(this);\\">

                          <font color=\\"white\\">$day_num</font></a></td>";

                          echo "<input type=\\"hidden\\" name=\\"availability_$day_num\\" id=\\"availability_$day_num\\" value=\\"\\">"; 

                // If they have previously set their availability to Working - make their cell orange

                }elseif ($Availability == 'Working'){

                    echo "<td id = \\"td1\\" align=\\"center\\" class=\\"today2\\" bgcolor=\\"#FFCC33\\">

                            <a title=\\"availability_$day_num\\" href=\\"#\\" count=\\"3\\" onclick=\\"countClicks(this);\\">

                          <font color=\\"white\\">$day_num</font></a></td>";

                          echo "<input type=\\"hidden\\" name=\\"availability_$day_num\\" id=\\"availability_$day_num\\" value=\\"\\">"; 

                // Otherwise they haven't set their availability, make the cell white 

                }else{

                    echo "<td id = \\"td1\\" align=\\"center\\" class=\\"today\\">

                           <a title=\\"availability_$day_num\\" href=\\"#\\" count=\\"0\\" onclick=\\"countClicks(this);\\">$day_num</a></td>";

                          echo "<input type=\\"hidden\\" name=\\"availability_$day_num\\" id=\\"availability_$day_num\\" value=\\"\\">"; 

                } 

You need some modifications in the JavaScript code, too.
Replace the following lines:


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

to:


	if (obj.count === undefined) {
		obj.count = obj.getAttribute ("count");
	}

Some remarks:

  • in HTML5, custom attribute names (count) must be prefixed with “data-”. Your site will work without any problem, but the HTML5 validator will say ‘Attribute count not allowed on element a’. If it is important for you to conform to the HTML5 standard, use data-count instead of count:
// If they have previously set their availability to available - make the cell green

                if($Availability == 'Available'){

                     echo "<td id = \\"td1\\" align=\\"center\\" class=\\"today2\\" bgcolor=\\"#66CC33\\">

                            <a title=\\"availability_$day_num\\" href=\\"#\\" data-count=\\"1\\" onclick=\\"countClicks(this);\\">

                          <font color=\\"white\\">$day_num</font></a></td>";

                          echo "<input type=\\"hidden\\" name=\\"availability_$day_num\\" id=\\"availability_$day_num\\" value=\\"\\">"; 

                // If they have previously set their availability to not available - make the cell red

                }elseif ($Availability == 'Not Available'){    

                    echo "<td id = \\"td1\\" align=\\"center\\" class=\\"today2\\" bgcolor=\\"#FF0000\\">

                            <a title=\\"availability_$day_num\\" href=\\"#\\" data-count=\\"2\\" onclick=\\"countClicks(this);\\">

                          <font color=\\"white\\">$day_num</font></a></td>";

                          echo "<input type=\\"hidden\\" name=\\"availability_$day_num\\" id=\\"availability_$day_num\\" value=\\"\\">"; 

                // If they have previously set their availability to Working - make their cell orange

                }elseif ($Availability == 'Working'){

                    echo "<td id = \\"td1\\" align=\\"center\\" class=\\"today2\\" bgcolor=\\"#FFCC33\\">

                            <a title=\\"availability_$day_num\\" href=\\"#\\" data-count=\\"3\\" onclick=\\"countClicks(this);\\">

                          <font color=\\"white\\">$day_num</font></a></td>";

                          echo "<input type=\\"hidden\\" name=\\"availability_$day_num\\" id=\\"availability_$day_num\\" value=\\"\\">"; 

                // Otherwise they haven't set their availability, make the cell white 

                }else{

                    echo "<td id = \\"td1\\" align=\\"center\\" class=\\"today\\">

                           <a title=\\"availability_$day_num\\" href=\\"#\\" data-count=\\"0\\" onclick=\\"countClicks(this);\\">$day_num</a></td>";

                          echo "<input type=\\"hidden\\" name=\\"availability_$day_num\\" id=\\"availability_$day_num\\" value=\\"\\">"; 

                } 
<script type="text/javascript">	
	function countClicks (obj){
			if (obj.count === undefined) {
				obj.count = obj.getAttribute ("data-count");
			}
 
            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>