Jump to content

Quick Question


Ell20

Recommended Posts

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

Link to comment
Share on other sites

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>

Link to comment
Share on other sites

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

		}
	}

}

Link to comment
Share on other sites

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

		}
	}

}

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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

		}
	}


Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.