Ell20 Posted August 7, 2008 Share Posted August 7, 2008 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 Quote Link to comment Share on other sites More sharing options...
lemmin Posted August 7, 2008 Share Posted August 7, 2008 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> Quote Link to comment Share on other sites More sharing options...
Ell20 Posted August 7, 2008 Author Share Posted August 7, 2008 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++; } } } Quote Link to comment Share on other sites More sharing options...
lemmin Posted August 7, 2008 Share Posted August 7, 2008 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++; } } } Quote Link to comment Share on other sites More sharing options...
Ell20 Posted August 7, 2008 Author Share Posted August 7, 2008 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 Quote Link to comment Share on other sites More sharing options...
KevinM1 Posted August 7, 2008 Share Posted August 7, 2008 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. Quote Link to comment Share on other sites More sharing options...
Ell20 Posted August 7, 2008 Author Share Posted August 7, 2008 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 Quote Link to comment Share on other sites More sharing options...
haku Posted August 8, 2008 Share Posted August 8, 2008 Quick questions rarely turn out to be so. Quote Link to comment Share on other sites More sharing options...
Ell20 Posted August 8, 2008 Author Share Posted August 8, 2008 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? Quote Link to comment Share on other sites More sharing options...
lemmin Posted August 8, 2008 Share Posted August 8, 2008 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++; } } Quote Link to comment Share on other sites More sharing options...
Ell20 Posted August 8, 2008 Author Share Posted August 8, 2008 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 Quote Link to comment Share on other sites More sharing options...
haku Posted August 11, 2008 Share Posted August 11, 2008 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.