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>