JavaScript getElementById not Working
<p>I need help with this code if someone is willing to help. I cannot get the 2 getElementById functions to work and I am a beginner so I am sure it is something simple but I have not been able to fix it. I need to click on the text to change the font. Any help in the right direction will be greatly apprecited. Please check the code below.</p>

<pre><code>&lt;?xml version = "1.0" encoding = "utf-8"?&gt;
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
&lt;html xmlns = "http://www.w3.org/1999/xhtml"&gt;

&lt;head&gt;
        &lt;title&gt;Solution Page 486 Exercise 12.7&lt;/title&gt;
   &lt;style type = "text/css"&gt;
           .option { color: darkblue }
           .graybg { background-color: #aaaaaa }
           .whitebg { background-color: #ffffff }
           .sans { font-family: sans-serif }
           .serif { font-family: serif }
        &lt;/style&gt;
&lt;script type = "text/javascript"&gt;
           function bodyClass(color)
          {
              document.body.className = color;
          }

        &lt;/script&gt;
     &lt;/head&gt;

     &lt;body&gt;
        &lt;div id = "main"&gt;Click on Options Listed Below to see how they modify this page.&lt;br &gt;&lt;br &gt;
          &lt;div&gt;Options:
          &lt;div onclick = "bodyClass('graybg');"
                class = "option"&gt;Gray background&lt;/div&gt;
              &lt;div onclick = "bodyClass('whitebg');"
                class = "option"&gt;White background&lt;/div&gt;
             &lt;div onclick = "document.getElementById("  class
                 = "option" classname ="sans" ? main?).&gt;Sans-serif text&lt;/div&gt;
             &lt;div onclick = "document.getElementById("  class
                 = "option" classname ="serif" ? main?).&gt;Serif text&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
     &lt;/body&gt;
 &lt;/html&gt;
</code></pre>
