Quick Question

[Ell20]

Hi,

 

I have a script which has the following code:

if(nums <= 10 && (document.getElementById('num' + pickId).style.backgroundColor != 'red') && (document.getElementById('previouslySelected').value == 0)){

			document.getElementById('value' + nums).value=pickId;
			document.getElementById('num' + pickId).style.backgroundColor='red';

			nums++;

		}

 

 

The above script basically changes the background colour of the TD cell to red when clicked.

I wanted to add some code so that if the cell had already been clicked it turned it back to white.

Here is my attempt, however it dosent appear to do anything, can anyone direct me as to where I am going wrong?

 

 

if(document.getElementById('num' + pickId).style.backgroundColor == 'red'){

			document.getElementById('value' + nums).value='';
			document.getElementById('num' + pickId).style.backgroundColor='white';

			nums--;

}

 

Thanks for any help

[lemmin]

You could make a global variable to check whether it has been set or not.

<script type="text/JScript">
var toggle = 0;
function change()
{
   document.getElementById('value' + nums).value=pickId;
   if (toggle)
   {
      document.getElementById('value' + nums).style.backgroundColor='white';
      toggle = 0;
   }
   else
   {
      document.getElementById('value' + nums).style.backgroundColor='red';
      toggle = 1;
   }
}
</script>

[Ell20]

Hi,

 

Thanks for the help, I am not really familiar with Javascript and only no very little.

 

I wanted to be able to incorporate it into the current javascript I have, here is the full code:

 

var nums = 1;
var highlightbehavior="TD"

var ns6=document.getElementById&&!document.all
var ie=document.all

function changeto(e,pickId){

	source=ie? event.srcElement : e.target

	if (source.tagName=="TABLE"){

		return;

	}

	while(source.tagName!=highlightbehavior && source.tagName!="HTML"){

		source=ns6? source.parentNode : source.parentElement

	}

	if (source.id!="ignore"){

		if(nums <= 10 && (document.getElementById('num' + pickId).style.backgroundColor != 'red') && (document.getElementById('previouslySelected').value == 0)){

			document.getElementById('value' + nums).value=pickId;
			document.getElementById('num' + pickId).style.backgroundColor='red';

			nums++;

		}
	}

}

[lemmin]

Try this:

var nums = 1;
var highlightbehavior="TD"

var ns6=document.getElementById&&!document.all
var ie=document.all
var toggle = 0;
function changeto(e,pickId){

	source=ie? event.srcElement : e.target

	if (source.tagName=="TABLE"){

		return;

	}

	while(source.tagName!=highlightbehavior && source.tagName!="HTML"){

		source=ns6? source.parentNode : source.parentElement

	}

	if (source.id!="ignore"){

		if(nums <= 10 && (document.getElementById('num' + pickId).style.backgroundColor != 'red') && (document.getElementById('previouslySelected').value == 0)){

			document.getElementById('value' + nums).value=pickId;
			if (toggle)
			{
				document.getElementById('num' + pickId).style.backgroundColor='white';
				toggle = 0;
			}
			else
			{
				document.getElementById('num' + pickId).style.backgroundColor='red';
				toggle = 1;
			}


			nums++;

		}
	}

}

[Ell20]

Hi,

 

Thanks for the code but it dosent appear to do anything when you click on a already selected (red) cell.

 

Edit: Just realised that it seems to be making every other cell white. Its suppose to make them red to start with, if the cell is already red and its clicked on again its suppose to go white.

 

Cheers

[KevinM1]

Here's an easy way to do it.  First, give your table an id attribute, then do the following:

<script type="text/javascript">
   window.onload = function()
   {
      var myTable = document.getElementById('tableId'); //get a reference to the table
      var tableCells = myTable.getElementsByTagName('td'); //get all of its cells

      for(var i = 0; i < tableCells.length; i++) //loop through all the cells, adding an onclick style toggle to each one
      {
         tableCells[i].onclick = function()
         {
            if(this.style.backgroundColor == 'white')
            {
               this.style.backgroundColor = 'red';
            }
            else
            {
               this.style.backgroundColor = 'white';
            }
         }
      }
   }
</script>

 

This assumes you're using color names rather than hex values.  You should be able to adapt this idea to your script.

[Ell20]

Hi,

 

Thanks for the reply, it may work, but I am trying to incorporate the additional part in to what I already have as that is working seemlessly.

 

Is there anyway to add to the script that I already have in place?

 

Cheers

[haku]

Quick questions rarely turn out to be so.

[Ell20]

Thanks for your very helpful response haku.

If you cant contribute anything useful, dont contribute at all.

 

I thought it would be a simple case of just adding some kind of if to say if the cell is red turn it white.

 

Can anyone help with this?

[lemmin]

Try this:

var nums = 1;
var highlightbehavior="TD"

var ns6=document.getElementById&&!document.all
var ie=document.all

function changeto(e,pickId){

	source=ie? event.srcElement : e.target

	if (source.tagName=="TABLE"){

		return;

	}

	while(source.tagName!=highlightbehavior && source.tagName!="HTML"){

		source=ns6? source.parentNode : source.parentElement

	}

	if (source.id!="ignore"){

		if(nums <= 10 && (document.getElementById('num' + pickId).style.backgroundColor != 'red') && (document.getElementById('previouslySelected').value == 0)){

			document.getElementById('value' + nums).value=pickId;

			if (document.getElementById('num' + pickId).style.backgroundColor=='red')
				document.getElementById('num' + pickId).style.backgroundColor='white';
			else
				document.getElementById('num' + pickId).style.backgroundColor='red';

			nums++;

		}
	}

[Ell20]

Hey,

 

Thanks for the code, it still works for the first click, in which it turns red.

However if the cell is already red and you click again it dosent appear to do anything?

 

Thanks for your help

[haku]

Well, I thought I would give you some help, but after this comment:

 

If you cant contribute anything useful, dont contribute at all.

 

I think I'll pass.