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
  • 184 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by MartinRinehart

Dani AI

Generated

Short diagnosis for : your inline handlers are syntactically malformed (unmatched quotes and stray text), and you also mixed up attribute names. That causes a parse or runtime error so the browser never reaches the code that calls getElementById. is right to push the logic out of attributes — moving behavior into a script and using event listeners both fixes quoting problems and makes debugging much easier.

A straightforward, modern pattern: give the controls data attributes, listen for clicks on the container (event delegation), and update the target element's classes with classList. This keeps HTML clean and avoids quote-hell.

Example (place script after markup or run on DOMContentLoaded):

/* CSS */
.bg-gray { background:#aaa; }
.bg-white { background:#fff; }
.font-sans { font-family: sans-serif; }
.font-serif { font-family: serif; }

/* HTML */
<div id="main-content">Sample text to change.</div>
<nav id="controls">
  <button data-class="bg-gray">Gray</button>
  <button data-class="bg-white">White</button>
  <button data-class="font-sans">Sans</button>
  <button data-class="font-serif">Serif</button>
</nav>

/* JS */
document.getElementById('controls').addEventListener('click', function(e){
  var cls = e.target.getAttribute && e.target.getAttribute('data-class');
  if (!cls) return;
  var main = document.getElementById('main-content');
  main.classList.remove('bg-gray','bg-white','font-sans','font-serif');
  main.classList.add(cls);
});

Troubleshooting checklist

  • Open the browser console for syntax errors (unmatched quotes show up as parse errors).
  • Ensure the element id you use in getElementById exactly matches the markup and the script runs after that element exists (or use DOMContentLoaded).
  • Use classList (or className as a fallback) rather than trying to set a non-existent classname HTML attribute.
  • Prefer semantic controls (buttons/links) for accessibility and keyboard support.

If the page is actually being served as XHTML (application/xhtml+xml), attribute quoting rules are stricter — mismatched quotes will break parsing entirely, so fix quoting or serve as text/html.

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.