JavaScript - Script To Change Cell Color When Clicked And Back To Original When Other Cell Clicked

I am building an online survey using a survey creation tool which allows me to incorporate javascript for additional functionality. However, I am new to javascript so would appreciate any help that you could provide me with.

I have question types like agreement scales, where the respondent sees a list of statements and has to rate each one by clicking on a radio button. The source code of the matrix table looks like this:

Code:

<thead><tr class="Answers">

			<th class='c1 BorderColor' width="25%" class='c1'> &nbsp; </th>
		<th class='c2 BorderColor' class='c2 yAxisBorder' > &nbsp; </th>
		<th class='c3 BorderColor' class='c3 yAxisBorder' > &nbsp; </th>
	
	
										
		<th width="25%" class='Selection BorderColor c4   ' id='header~QID19~1~4' >

			<label>Disagree</label>
		</th>
										
		<th width="25%" class='Selection BorderColor c5   ' id='header~QID19~2~5' >
			<label>Neither agree nor disagree</label>
		</th>
										
		<th width="25%" class='Selection BorderColor c6 last  ' id='header~QID19~3~6' >
			<label>Agree</label>

		</th>
	
	
</tr></thead><tr class='ChoiceRow   '><th class='c1' id='header~QID19~1'><span class='LabelWrapper'><label for='QR~QID19~1'>Statement 1</label></span> </th><td class='c2 BorderColor' class='c2 yAxisBorder' headers='header~QID19~1' > &nbsp; </td><td class='c3 BorderColor' class='c3 yAxisBorder' headers='header~QID19~1' > &nbsp; </td><td class='c4   ' headers='header~QID19~1~4 header~QID19~1'><input type='radio' name='QR~QID19~1' value='QR~QID19~1~1'  ></td><td class='c5   ' headers='header~QID19~2~5 header~QID19~1'><input type='radio' name='QR~QID19~1' value='QR~QID19~1~2'  ></td><td class='c6 last  ' headers='header~QID19~3~6 header~QID19~1'><input type='radio' name='QR~QID19~1' value='QR~QID19~1~3'  ></td></tr><tr class='ChoiceRow ReadableAlt  '><th class='c1' id='header~QID19~2'><span class='LabelWrapper'><label for='QR~QID19~2'>Statement 2</label></span> </th><td class='c2 BorderColor' class='c2 yAxisBorder' headers='header~QID19~2' > &nbsp; </td><td class='c3 BorderColor' class='c3 yAxisBorder' headers='header~QID19~2' > &nbsp; </td><td class='c4   ' headers='header~QID19~1~4 header~QID19~2'><input type='radio' name='QR~QID19~2' value='QR~QID19~2~1'  ></td><td class='c5   ' headers='header~QID19~2~5 header~QID19~2'><input type='radio' name='QR~QID19~2' value='QR~QID19~2~2'  ></td><td class='c6 last  ' headers='header~QID19~3~6 header~QID19~2'><input type='radio' name='QR~QID19~2' value='QR~QID19~2~3'  ></td></tr><tr class='ChoiceRow  bottom '><th class='c1' id='header~QID19~3'><span class='LabelWrapper'><label for='QR~QID19~3'>Statement 3</label></span> </th><td class='c2 BorderColor' class='c2 yAxisBorder' headers='header~QID19~3' > &nbsp; </td><td class='c3 BorderColor' class='c3 yAxisBorder' headers='header~QID19~3' > &nbsp; </td><td class='c4   ' headers='header~QID19~1~4 header~QID19~3'><input type='radio' name='QR~QID19~3' value='QR~QID19~3~1'  ></td><td class='c5   ' headers='header~QID19~2~5 header~QID19~3'><input type='radio' name='QR~QID19~3' value='QR~QID19~3~2'  ></td><td class='c6 last  ' headers='header~QID19~3~6 header~QID19~3'><input type='radio' name='QR~QID19~3' value='QR~QID19~3~3'  ></td></tr><input type=hidden name='Transformation~QID19~1' value='YToxOntzOjEwOiJRUn5RSUQxOX4xIjtzOjE2OiJ7dmFsdWV9PVNlbGVjdGVkIjt9' id=''><input type=hidden name='Transformation~QID19~2' value='YToxOntzOjEwOiJRUn5RSUQxOX4yIjtzOjE2OiJ7dmFsdWV9PVNlbGVjdGVkIjt9' id=''><input type=hidden name='Transformation~QID19~3' value='YToxOntzOjEwOiJRUn5RSUQxOX4zIjtzOjE2OiJ7dmFsdWV9PVNlbGVjdGVkIjt9' id=''></table></div>

I don't have any control over the HTML as this is generated by the survey tool. However, the survey tool has a "JavaScript Editor" for each question, where I can put in javascript functions, and it executes them when the page loads.

What I want to do is to have the label for each row (i.e for each statement) to change color when a corresponding radio button has been selected. This way, it is easier for respondents to see which rows they have answered.

I used the following JS code:

Code:

var radioname = [];
var radiolist = [];
var labelspans = [];
var labels = [];
var radios = [];
var count;
var spans = document.getElementsByTagName('span');

function getLabels()
  {
    for (x=0; x<spans.length; x++)
  {
    if (spans[x].className == "LabelWrapper")
    {
      labelspans.push(spans[x]);
    }
  }
    for (y=0; y<labelspans.length; y++)
  {
   labels.push(labelspans[y].firstChild);
   radioname.push(labelspans[y].firstChild.htmlFor);
  }
}
  
function getRadios()
{   
  //will put all radio groups into the "radiolist" array
  for (z=0; z<radioname.length; z++)
   {
     radiolist.push(document.getElementsByName(radioname[z]));
     //will add Event Listener to each radio button, and add each one to the "radios" array
     for (i=0; i<radiolist[z].length; i++)
       {
        chkradio = radiolist[z][i];
        chkradio.setAttribute("count",Number(z));
        chkradio.addEventListener("click", function(){changeLabel()}, false);
        radios.push(chkradio);
       }
  }
}

function changeLabel()
//loops through all the radios to check if they are selected, and changes label color accordingly          
   {
    for (w=0; w<radios.length; w++)   
      {
       if (radios[w].checked)
           {
            a = radios[w].getAttribute("count");
            labels[a].innerHTML = labels[a].innerHTML.fontcolor("green");
           }
       }
    }
getLabels();  
getRadios();

This code works as intended; however, as you can see, it loops through all the radio buttons when one is clicked. Is there a way to accomplish this without looping through all the radios, and thus make the script run faster?

Also, I have read that the addEventListener function does not work for older versions of IE. Is there a simpler alternative?

Hey all,

Hoping someone could help me out with some javascript coding as I am a complete novice to this!

I am currently building a website using 1 static page and all the content will be pulled in through different iframes by clicking on a navigation on the page. I found a very handy piece of javascript coding that lets me remove a class from one link and move it to the link that was clicked on (the code will be below).

The issue I am facing with this is that if I have Home set to class="On" to begin with and then click on Location, the background image will be added to the Location section but won't get removed from Home until it is physically clicked on.

Can anyone help me out with how I can get this to work correctly?

javascript:

Code:

<script language="JavaScript" type="text/javascript">

var Lst;

function CngClass(obj){
 if (typeof(obj)=='string') obj=document.getElementById(obj);
 if (Lst) Lst.className='';
 obj.className='On';
 Lst=obj;
}

</script>

HTML:

Code:

<div id="navWrapper">

			<div id="globalNav">
				<ul>
				<li onclick="CngClass(this);" class="On"><a href="iframes/home.html" target="content_iframe">Home</a></li>
				<li onclick="CngClass(this);" class=""><a href="iframes/location.html" target="content_iframe">Location</a></li>
				<li onclick="CngClass(this);" class=""><a href="iframes/speakers.html" target="content_iframe">Speakers</a></li>
				<li onclick="CngClass(this);" class=""><a href="iframes/agenda.html" target="content_iframe">Agenda</a></li>
				<li onclick="CngClass(this);" class=""><a href="iframes/useful_material.html" target="content_iframe">Useful Material</a></li>
				<li onclick="CngClass(this);" class=""><a href="iframes/event_presentations.html" target="content_iframe">Event Presentations</a></li>
				<li onclick="CngClass(this);" class=""><a href="iframes/gallery.html" target="content_iframe">Gallery</a></li>
				</ul>
			</div>
            
            <div id="localNav"></div>
        
		</div>

Hi guys,

I've been breaking my brains for few hours, I already searched online and I found nothing so far.

What I wanna do....

I have 5 different images linked to 5 different websites. Once the image is clicked, the first link will be displayed in an iframe, and the image will change to the second one. Once we click on the second image, the second link will be displayed using the same iframe, and so on.

The code changes the images,but I dunno how to deal with the link to the websites.

This is the code:

Code:

<html>
<head>
<title>Testing...</title>
</head>

<script type="text/javascript">
	imgs=Array("1.png","2.png","3.png","4.png","5.png");
	links=Array("www.vbct.ca","www.cnn.com","www.castanet.net","www.yahoo.com","www.cubaweb.cu");
	
	var x=0;

	function change() {
		document.getElementById("changes").src=imgs[++x];
		if (x==4) {
		x=-1;
		}
	}
	
	if (!imgs[x+1]) {
	x=-1;
	}
</script>

<body>

<div>
	<iframe src="http://www.vbct.ca" style="border: 0; position:relative; top:0; left:0; right:0; bottom:0; width:100%; height:400px;" name="page" width="100%"></iframe>
</div>
<br /><br />

<div>
<a href="#" target="page"><img src="1.png" id="changes" alt="alttext" onmousedown="change()" style="cursor: pointer;" /></a>
</div>

</body>
</html>

And this is the link to the test page:

http://www.virtualbc.ca/sites/test/

Hi all,

I currently have this javascript that will change the cell to green with one click...

Code:

<script type="text/javascript">
    	function ColorChange(obj){
			obj.style.color='#FFFFFF';
			obj.style.backgroundColor='#66CC33';
			obj.parentNode.style.backgroundColor='#66CC33';
		}
    </script>

echo "<td align=\"center\" bgcolor=\"#EEEEEE\"><a href=\"#\" onclick=\"ColorChange(this)\">$day_num</a></td>";

the problem is that I need around 3 different colors to be possible..

e.g. 1 click turns cell green | 2 turns is red | 3 turns it orange.

I'm not sure how to take this javascript further?

Would someone be kind enough to point me in the right direction?

Many thanks,

Greens85

Hi All
I'm trying to get a drop down box to change the colour of more than 1 td cell at a time. I can get the boxes to work with single cells but not more than one. I've tried giving the additional cell the same id but that doen't seem to work It's probably simple but I just can't seem to see it. Thanks in anticipation.
Mike
http://www.blandfordsac.co.uk/
Code:

<script type="text/javascript">function changeColor(bg) {document.getElementById("a").style.backgroundColor = bg;}</script>
<script type="text/javascript">function changeColorb(bg) {document.getElementById("b").style.backgroundColor = bg;}</script>
<script type="text/javascript">function changeColorc(bg) {document.getElementById("c").style.backgroundColor = bg;}</script>
<script type="text/javascript">function changeColord(bg) {document.getElementById("d").style.backgroundColor = bg;}</script>

Code:

<tr><!-- row 1 -->
<td id="a" height="205" width="345"><p align="center">
<a href="images/bd8/bd8n.jpg"  target="_self" rel="wplightbox~#~~#~">
<img src="images/bd8/bd8n%20(WinCE).jpg" width="240" height="160" border="0" title="" alt="bd8n.jpg">
</a>
</td>
<td height="205" width="246" colspan="3"><h1 align="center"><span style="font-weight: 400"><font face="Arial">Bd 8</font></span></h1></td>
<td id="b" height="205"><p align="center">
<a href="images/bd8/bd8e.jpg"  target="_self" rel="wplightbox~#~~#~">
<img src="images/bd8/bd8e%20(WinCE).jpg" width="240" height="160" border="0" title="" alt="bd8e.jpg">
</a>
</td>	
</tr>		
<tr><!-- row 2 -->
<td>
<p align="center">
<select name="level" onChange="changeColor(value)">
<option value="">Choose</option> 
<option value="#FFFFFF">White</option>
<option value="#33FF00">Green</option>
<option value="#000000">Black</option>
<option value="#FF0000">Red</option>
</select>
</td>
<td height="59" width="246" colspan="3">&nbsp;</td>
<td>
<p align="center">
<select name="level" onChange="changeColorb(value)">
<option value="">Choose</option> 
<option value="#FFFFFF">White</option>
<option value="#33FF00">Green</option>
<option value="#000000">Black</option>
<option value="#FF0000">Red</option>
</select>
</td>
</tr>

im trying to figure out a script

that when someone clicks my checkbox (or onchange/onclick events the span tag that wraps it) it changes the color of the font in the span tag...

but then if they click again...for the color to return to normal


heres my checkboxes as of the moment... disregard the sloppy multiple classes....i wanted to pad the elements evenly lol

Code:

  <div id="selectform">
           
           <span onclick="id='colorchange'"  class="webspace"><input type="checkbox"  value="website"> Website Design
           </span> 
            <span class="reverbspace"> <input type="checkbox"  value="reverb"> Reverb Nation </span>
             <span class="twitspace"><input type="checkbox"  value="twitter"> Twitter </span>
            <span class="logospace"> <input type="checkbox"  value="logo"> Logo/Branding </span>
            <span class="soundclickspace"> <input type="checkbox"  value="ning"> SoundClick </span>
            <span class="photospace"> <input type="checkbox"  value="photo"> Photo Retouch </span>
             <span class="albumspace"><input type="checkbox" value="Album/Mixtape/DVD"> Mixtape/ DVD Cover</span>
            <span class="ningspace"> <input type="checkbox"  value="ning"> Ning WebSite  </span>
           <span class="flyerspace">  <input type="checkbox"  value="flyer"> Flyers  </span>
            <span class="businessspace"> <input type="checkbox"  value="Business card"> Business Card </span>
            <span class="brochurespace"> <input type="checkbox"  value="Brochure"> Brochure </span>
            <span class="otherspace">  <input type="checkbox" > Other </span>
         
            </div>

Hi friends,
What I have been trying to achieve is,

On my index.htm, I have a horizontal cell named "memberarea" which originally shows username & password input fields. After the user logs in, this area changes itself to a "Welcome Name, Lastname" field.

I want that this cell displays again the username and password input fields in case of the session of the user has expired.

I have tried it with the following code (within the Iframe in index.htm):
-----------------------------------------

<script>
if ("<%=session("LoginFirstName")%>" == "")
{
var m = " <p align="center">
<font style="font-size: 8pt; font-weight: 700" face="arial">&nbsp;&nbsp;Username:</font>
<span style="font-size: 1pt">
<input type="text" name="uid" id="uid" size="14" style="width: 65; height: 17; font-size: 8pt"></span><font face="arial" style="font-size: 8pt">
</font><font style="font-size: 8pt; font-weight: 700" face="arial">Password:</font><font face="arial" style="font-size: 8pt">
</font><span style="font-size: 1pt">
<input type="password" name="pwd" id="pwd" maxlength="10" size="14" style="width: 65; height: 17; font-size: 8pt"></span><span style="font-size: 1px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</span>
<input type="submit" value="Enter" name="B1" style="width: 35; height: 17; font-size:9px" onclick="return login()">";

window.parent.document.getElementById('memberarea').innerHTML=m;
}
</script>
--------------------------------------------------

This code gives me the error that on the 12xx'the line (which does not exist-the whole code is 5xx lines). there is a ";" missing which I could not found.

Any ideas how to achieve this?

Thank you for your comments

Hey,
I'm not to good at javascript and need help.
When someone clicks an option in a <select> box, I want a field to appear with a normal text box.
For example:
Code:

<!--Option box-->
<select name="method">
<option>Post 2 Host</option>
<option>Paid</option>
<!--I want it when they click Paid, a box shows up below. Such as-->
<input type="text" name="paid" />

Can you show me how I can do this?
Thanks.

Hey,
I'm new to javascript and was wondering if there is something where you can tell if something is clicked.
All I need is to know something where you click something and it appears, and click again it disappears.

How can I do this?
Thanks!

Hi everyone - I was wondering how it would be possible for me to create a FAQ with drop-down answers when the question is clicked?

For example: https://www.facebook.com/help/?page=1145

Facebook has something like that available.

Any ideas?

On custom button images, how do you give them the effect that they're "pushed" when the user clicks them and "unpushed" when the user lets his finger off the mouse button? I'm guessing it's some type of rollover effect, but I'm not sure how it's done.

I have a simple problem that I can't solve. I know that you guys might know how to solve it. I'm using an extension of dreamweaver called Coursebuilder. I'm making an online-examination to improve education especially in a far region of Asia where there's poor quality of education in there. Now, I'm making a multiplication choice type of exam with radio buttons in it and when the "check answer" was clicked, the answer will be explained. It is already done, but the problem is the feedback score. I can't make a feedback score... example the examination is 40/100 score it must appear on the screen at once after a click of a certain button. That's my only problem for now. It will be used in CD format and online. what should i do? All I need is to know how will I put a button that once it was clicked the score in the examination will appear. I'm an amateur web designer, I need your help.

Thanks please help me.

Hi everyone! I need a little help with something. I have a page with several links that when clicked open a modal window. The same window for each link, with a form. However inside the form I need to print the id of the link that was clicked. Like so:

<a href="#" id="1">Link 1</a>
<a href="#" id="2">Link 2</a>
<a href="#" id="3">Link 3</a>

<form>
....somehow print/echo the id of the link...
</form>

Is this possible? Does anyone know how to do that? I'd appreciate any help!

Hey all, I would like to get the id of a html check box when the client clicks it. I want to do this on the client side so i need to use java script. I want to be able to do this in both fire fox and ie

window.event.srcElement works great for ie but not for firefox

please do not tell me to use Event.target for firefox because that does not work. At least it is not working for me anyway.

Thanks

Can a checkbox do 2 different things after it is clicked?

Right now I am using this...
Code:

<input type="checkbox" onclick="processCheckbox(this);">
<input type="checkbox" onclick="activLink(this.checked)">

I don't want to have 2 checkboxes on my page, just 1 and get the same result.

Is this possible?

Chad