7 Replies - 617 Views - Last Post: 04 February 2013 - 01:23 AM

#1 rjelliott_30  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 03-February 13

Problem Changing Background Color

Posted 03 February 2013 - 11:13 AM

I'm new to all of this and I'm having trouble with an assignment. I'm trying to get the webpage to change when the text is clicked on. For example when clicking Gray background the background should become gray. I'm sure I'm missing something dumb but I just can't figure it out. Below is the code I have.

<!DOCTYPE html>

<html>
	<head>
		<title>Exercise 12.6</title>

		<style type = "text/css">
			.option 	{ color: darkblue }
			.graybg 	{ background-color: #aaaaaa }
			.whitebg 	{ background-color: #ffffff }
			.sans 		{ font-family: sans-serif }
			.serif 		{ font-family: serif }
		</style>

		<script type = "text/javascript">

			function bodyClass()
			{
				document.body.classname = class;
			}

		</script>
	</head>	

	<body>
		<div id = "main">Some sample text.<br/><br/>
			<div>Options:
				<div onclick = "document.body.classname = 'graybg'"
				class = "option">Gray background</div>
				
				<div onclick = "document.body.classname = 'whitebg'"
				class = "option">White background</div>
				
				<div onclick =
				"document.getElementById( 'main' ).classname = 'sans'"
				class = "option">Sans-serif text</div>
				
				<div onclick =
				"document.getElementById( 'main' ).classname = 'serif'"
				class = "option">Serif text</div>
			</div>
		</div>
	</body>
</html>


Is This A Good Question/Topic? 0
  • +

Replies To: Problem Changing Background Color

#2 Sho Ke  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 110
  • View blog
  • Posts: 250
  • Joined: 13-October 11

Re: Problem Changing Background Color

Posted 03 February 2013 - 11:31 AM

You want to use classNameto assign an element a class, not classname.

Ex:
	<div onclick = "this.className = 'graybg';"class = "option">
       Gray  background</div>



Keep in mind that when you change an elements classes via className using '=', you overwrite all classes that element contains.
Was This Post Helpful? 0
  • +
  • -

#3 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3834
  • View blog
  • Posts: 13,583
  • Joined: 12-December 12

Re: Problem Changing Background Color

Posted 03 February 2013 - 11:37 AM

You cannot use class as a variable name, it is a reserved word (even though your function bodyClass() is never executed).
Was This Post Helpful? 1
  • +
  • -

#4 rjelliott_30  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 03-February 13

Re: Problem Changing Background Color

Posted 03 February 2013 - 11:50 AM

View PostSho Ke, on 03 February 2013 - 11:31 AM, said:

You want to use classNameto assign an element a class, not classname.

Ex:
	<div onclick = "this.className = 'graybg';"class = "option">
       Gray  background</div>



Keep in mind that when you change an elements classes via className using '=', you overwrite all classes that element contains.


I tried the change you suggested above and nothing changed. The background color still doesn't change on click.

View Postandrewsw, on 03 February 2013 - 11:37 AM, said:

You cannot use class as a variable name, it is a reserved word (even though your function bodyClass() is never executed).


After your suggestion I changed my code and I must still be missing something.

<script type = "text/javascript">
	function bodyClass()
	{
		document.body.classname = color;
	}
</script>


<div onclick = "bodyClass('graybg');"
class = "option">Gray background</div>

Was This Post Helpful? 0
  • +
  • -

#5 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3834
  • View blog
  • Posts: 13,583
  • Joined: 12-December 12

Re: Problem Changing Background Color

Posted 03 February 2013 - 12:01 PM

<script type = "text/javascript">
	function bodyClass()
	{
		document.body.classname = color;
	}
</script>

Javascript is case-sensitive so it must be className, not classname.
<div onclick = "bodyClass('graybg');"
class = "option">Gray background</div>

You are passing the value 'graybg' to your function but your function is not set up to receive a value. You need:
function bodyClass(color)

in order to pass, and receive, a value in your function.
Was This Post Helpful? 0
  • +
  • -

#6 rjelliott_30  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 03-February 13

Re: Problem Changing Background Color

Posted 03 February 2013 - 12:08 PM

View Postandrewsw, on 03 February 2013 - 12:01 PM, said:

<script type = "text/javascript">
	function bodyClass()
	{
		document.body.classname = color;
	}
</script>

Javascript is case-sensitive so it must be className, not classname.
<div onclick = "bodyClass('graybg');"
class = "option">Gray background</div>

You are passing the value 'graybg' to your function but your function is not set up to receive a value. You need:
function bodyClass(color)

in order to pass, and receive, a value in your function.


That worked perfectly thank you so much!

I had the exact same problem with my fonts also. I just needed to change classname to className. Thank for your help.
Was This Post Helpful? 0
  • +
  • -

#7 raghav.naganathan  Icon User is offline

  • Perfectly Squared ;)
  • member icon

Reputation: 408
  • View blog
  • Posts: 1,440
  • Joined: 14-September 12

Re: Problem Changing Background Color

Posted 03 February 2013 - 10:34 PM

I know you have got the solution to the problem thanks to andrewsw's excellent answer.

Nevertheless, I thought I could add something to your code,although not related to your question.

Well, first when I saw that page, I thought that it was simple text, until I clicked on the word Gray background and it changed.

Now, why not make it something where the user will know that he needs to click on to see the background change and the text change...in other words, why not use a hyperlink like this...

<div onclick = "document.body.className = 'graybg'"
class = "option"><a href="#">Gray background</a></div>
				
<div onclick = "document.body.className = 'whitebg'"
class = "option"><a href="#">White background</a></div>
		
<div onclick ="document.getElementById( 'main' ).className = 'sans'"		
class = "option"><a href="#">Sans-serif text</a></div>
				
<div onclick ="document.getElementById( 'main' ).className = 'serif'"
class = "option"><a href="#">Serif text</a></div>


regards,
Raghav
Was This Post Helpful? 0
  • +
  • -

#8 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3834
  • View blog
  • Posts: 13,583
  • Joined: 12-December 12

Re: Problem Changing Background Color

Posted 04 February 2013 - 01:23 AM

@raghav
Thanks once again for the support :)
However, adding an a-link, and then disabling its functionality (using #), is not considered a good practice. It is adding unnecessary markup to the page.

Instead, it is easy to add a few more rules to the CSS so that the DIVs look clickable. For example, by changing the cursor and the text-colour, etc.

Regards, Andy.
Was This Post Helpful? 1
  • +
  • -

Page 1 of 1