4 Replies - 6597 Views - Last Post: 21 April 2008 - 03:20 PM

#1 orangebulb  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 21
  • Joined: 08-April 08

paragraphs to change background color

Post icon  Posted 21 April 2008 - 11:03 AM

This is a pretty simple javascript function I'm working on, but ya know... I'm confused and need a little help/direction. It is just supposed to change the background color you select of the paragraph you select.

Ok, I know my code is a complete mess... but I am trying.

http://www.radford.e...xtracredit.html

I know I didn't write the script right because it is supposed to be passed a parameter (col) which is a value of the background color the paragraph should change to. You can see I tried two different things. The first part of the function is where I changed it and tried to use the parameter it should be passed, but that didn't work. My first thought on how to do it was the way the rest of the function is written. However, I need to do it by passing it the parameter which is the value of the color it should change to. Any help/suggestions/direction is greatly appreciated!! :)

Thanks in advance!

Is This A Good Question/Topic? 0
  • +

Replies To: paragraphs to change background color

#2 Martyr2  Icon User is offline

  • Programming Theoretician
  • member icon

Reputation: 4359
  • View blog
  • Posts: 12,179
  • Joined: 18-April 07

Re: paragraphs to change background color

Posted 21 April 2008 - 11:33 AM

Two changes...

1) It is backgroundColor not background-color (javascript changes this up a little from the way CSS does it)
2) In your setting of bg1 and bg2, you must specify paragraphs p1 and p2 respectively.

Here is the code with changes made....


<html>
  <head><title>ITEC 225 Extra Credit</title>
  <script type="text/javascript">
  <!--
	 function chbackcol(col)
	 {

	   if (document.forms[0].elements[0].checked)
		{
		var bg0 = document.getElementById("p0").style;
		if (document.forms[0].elements[3].checked)
		   { bg0.backgroundColor = "white";
			 return false;
		   }
		if (document.forms[0].elements[4].checked)
		   { bg0.backgroundColor = "yellow";
			 return false;
		   }
		if (document.forms[0].elements[5].checked)
		   { bg0.backgroundColor = "pink";
			 return false;
		   }
		}

		if (document.forms[0].elements[1].checked)
		{
		var bg1 = document.getElementById("p1").style;
		if (document.forms[0].elements[3].checked)
		   { bg1.backgroundColor = "white";
			 return false;
		   }
		if (document.forms[0].elements[4].checked)
		   { bg1.backgroundColor = "yellow";
			 return false;
		   }
		if (document.forms[0].elements[5].checked)
		   { bg1.backgroundColor = "pink";
			 return false;
		   }
		}

		if (document.forms[0].elements[2].checked)
		{
		var bg2 = document.getElementById("p2").style;
		if (document.forms[0].elements[3].checked)
		   { bg2.backgroundColor = "white";
			 return false;
		   }
		if (document.forms[0].elements[4].checked)
		   { bg2.backgroundColor = "yellow";
			 return false;
		   }
		if (document.forms[0].elements[5].checked)
		   { bg2.backgroundColor = "pink";
			 return false;
		   }
		}



	 }
   // -->
   </script>
   </head>
   <body>
	<p style="border-style:solid;font-weight:bold;background-color:gray;color:white">
	Implement the javascript in this document, so the user can
	select a paragraph and then a color.  When the user selects the
	color, it will be used as the background color on the paragraph
	selected.  This document must be turned in by Wednesday, 4/23 at
	3:00 PM. It must be put in the ITEC 225 Drop Box in a RU06 folder
	that you create within your folder on the drop box.  This assignment
	will only be checked to see if it works properly.  If it does
	you will receive 25 extra points toward your overall assignment
	score.
	</p>
	<h2>Change Background Color</h2>

	<form action="" method="post">
	<p>Select the paragraph to change.
		  <table border="border">
			 <tr>
				 <td>Paragraph 1</td>
				 <td><input type="radio" name="para" value="1" /></td>
			 </tr>
			 <tr>
				 <td>Paragraph 2</td>

				 <td><input type="radio" name="para" value="2" /></td>
			 </tr>
			  <tr>
				 <td>Paragraph 3</td>
				 <td><input type="radio" name="para" value="3" /></td>
			 </tr>
		   </table>
	  </p>

	  <p>Select the background color and the change will occur for
		 the paragraph selected.
		   <table border="border">
			   <tr>
				   <td>White</td>
		   <td><input type="radio" name="col" value="white"
			   onclick="chbackcol(this.value)" /></td>
			   </tr>
			  <tr>
				   <td>Yellow</td>

		   <td><input type="radio" name="col" value="yellow"
			   onclick="chbackcol(this.value)" /></td>
			   </tr>
			  <tr>
				   <td>Pink</td>
		   <td><input type="radio" name="col" value="pink"
			   onclick="chbackcol(this.value)" /></td>
			   </tr>
			</table>
			</p>


			</form>
			<p id="p0" style="border-style:solid">
			  This is the first paragraph.  The first exam covered html, forms, and javascript.
			</p>
			 <p id="p1" style="border-style:solid">
			  This is the second paragraph.  The second exam covered dynamic html,
			   java applets, perl, and cgi programming.
			  </p>
			  <p id="p2" style="border-style:solid">
			   This is the third paragraph.   The final exam will cover all the topics from the
			   semester and IT copyright issues.
			   </p>

	   </body>
</html>



You might want to consider this for refactoring, it is a prime candidate.

Enjoy!

"At DIC we be paragraph color changing code ninjas... we change colors as well as flavors like the everlasting gobstopper from Wonka!" :snap:

This post has been edited by Martyr2: 21 April 2008 - 11:34 AM

Was This Post Helpful? 0
  • +
  • -

#3 orangebulb  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 21
  • Joined: 08-April 08

Re: paragraphs to change background color

Posted 21 April 2008 - 11:38 AM

Thanks. Thanks a ton! :)

duh. I knew that. We just finished doing perl, and I knew you changed background-color to backgroundColor in it, but I don't know what I wasn't thinking javascript did.

it's still not working.... the page isn't rendering again after you make your selections... ???
Was This Post Helpful? 0
  • +
  • -

#4 Martyr2  Icon User is offline

  • Programming Theoretician
  • member icon

Reputation: 4359
  • View blog
  • Posts: 12,179
  • Joined: 18-April 07

Re: paragraphs to change background color

Posted 21 April 2008 - 11:42 AM

I don't know what you are doing, this solution has been tested in both FireFox 2.0 and IE 6+. So make sure you didn't tinker with anything else. If you go back to your old copy and just change the background-color and the two style tags as indicated, there is no reason it should not work.

And all your script is doing is changing the colors, it isn't going to save the colors between refreshes or anything. It only changes it on client side because that is what you have instructed it to do.

;)

This post has been edited by Martyr2: 21 April 2008 - 11:43 AM

Was This Post Helpful? 0
  • +
  • -

#5 orangebulb  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 21
  • Joined: 08-April 08

Re: paragraphs to change background color

Posted 21 April 2008 - 03:20 PM

I'm sorry. It was just me being stupid. haha I forgot to upload it back to the web server before I was trying it again.

Again, THANKS SO MUCH! :) I am very much enjoying these forums!
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1