Member Avatar for hubbrdw

This is homework and I need help 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 the code below.

<?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">
<html xmlns = "http://www.w3.org/1999/xhtml">
  
<head>
        <title>Solution Page 486 Exercise 12.7</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">Click on Options Listed Below to see how they modify this page.<br ><br >
          <div>Options:
          <div onclick = "bodyClass('graybg');"
                class = "option">Gray background</div>
              <div onclick = "bodyClass('whitebg');"
                class = "option">White background</div>
             <div onclick = "document.getElementById("  class
                 = "option" classname ="sans" ? main?).>Sans-serif text</div>
             <div onclick = "document.getElementById("  class
                 = "option" classname ="serif" ? main?).>Serif text</div></div></div>
     </body>
 </html>
  • 2 Contributors
  • 1 Reply
  • 162 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by MartinRinehart
Member Avatar for MartinRinehart

Do not write JavaScript in a string assigned to an 'onclick' property. Write it in a function in a <script> area and assign the function, thusly:

...
<body>
...
<div id='an_id'> <!-- doesn't have to be a div, any element is OK -->
...
<script type='text/JavaScript'>
    var some_elem = document.getElementById( 'an_id' );
        some_elem.onclick = my_func; // no parens, no quotes!

    function my_func() {
        // your code goes here
        // in here, 'this' refers to the element that got the click
    }
</script>

</body>

May I ask a favor? Where are you studying JavaScript? What class and what text?

Thanks.

Edited by MartinRinehart because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.