2 Replies - 2986 Views - Last Post: 05 April 2011 - 09:18 AM

#1 kozo_gurl  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 13
  • Joined: 16-March 09

Changing Background Color

Posted 05 April 2011 - 06:35 AM

I'm just starting out in Javascript coding and my first assignment is to create a web page which the users are allowed to selecte dtheir favorite layout and formatting through the use of the className property. I wanted to use these four options the user can choose to change the display of the web page and text.

Gray background
White background
Sans-serif text
Serif text

If the user onclicks any of the options, the webpage will turn into that format. For example, if the user clicks "Gray backgound", the background color of the webpage will be Gray. If the user clicks Serif-text, the text in the web page will be in Serif text. The code I have right now doesn't let me click any of the links to change the display and text. Can anyone help?

<?xml version = "1.0" encoding = "utf-8"?>
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

  <!-- Ex.12.5 -->

  <html xmlns = "http://www.w3.org/1999/xhtml">
     <head>
        <title>Solution 12.5</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(color)
          {
              document.body.classname = color;
          }

          // -->
        </script>
     </head>

     <body>
        <div id = "main">Some sample text.<br /><br />
          <div>Options:
             <div onclick = "document.body.classname = 'graybg'"
                class = "color">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: Changing Background Color

#2 Jstall  Icon User is offline

  • Lurker
  • member icon

Reputation: 434
  • View blog
  • Posts: 1,042
  • Joined: 08-March 09

Re: Changing Background Color

Posted 05 April 2011 - 08:10 AM

Hi,


Change your function to :
   function bodyClass(color)
   {
       document.body.className = color;
   }



And the calls to this :
            <div onclick = "bodyClass('graybg');"
                class = "color">Gray background</div>
             <div onclick = "bodyClass('whitebg');"
           class = "option">White background</div>




That should do the trick, hope it helps :).
Was This Post Helpful? 1
  • +
  • -

#3 kozo_gurl  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 13
  • Joined: 16-March 09

Re: Changing Background Color

Posted 05 April 2011 - 09:18 AM

View PostJstall, on 05 April 2011 - 09:10 AM, said:

Hi,


Change your function to :
   function bodyClass(color)
   {
       document.body.className = color;
   }



And the calls to this :
            <div onclick = "bodyClass('graybg');"
                class = "color">Gray background</div>
             <div onclick = "bodyClass('whitebg');"
           class = "option">White background</div>




That should do the trick, hope it helps :).


I made the corrections but nothing is happening. I still can't click the links to change the background color for the web page to gray or white or even the text to the indicated text style.

View Postkozo_gurl, on 05 April 2011 - 10:15 AM, said:

View PostJstall, on 05 April 2011 - 09:10 AM, said:

Hi,


Change your function to :
   function bodyClass(color)
   {
       document.body.className = color;
   }



And the calls to this :
            <div onclick = "bodyClass('graybg');"
                class = "color">Gray background</div>
             <div onclick = "bodyClass('whitebg');"
           class = "option">White background</div>




That should do the trick, hope it helps :).


I made the corrections but nothing is happening. I still can't click the links to change the background color for the web page to gray or white or even the text to the indicated text style.

Sorry, never mind I figured out what I did wrong. It was a minor error.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1