Trying to implement a "theme change"

Question

redhotspike 0 Newbie Poster

15 Years Ago

I'm supposed to switch the themes of the "headline" and the "text", but I can't seem to get it. Here's what I have so far...anyone have any ideas why it doesn't work? Thanks :)

<?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" xml:lang="en" lang="en">
<head>
    <title>Part I</title>
    <style type="text/css">
    h1{
        color:#3333FF;
        font-style:italic;
        font-weight:bolder;
    }
    p{
        color:#76B200;
        font-variant:small-caps;
    }
    </style>
    <script type="text/javascript">
        var head;
        function theme2setup(){
            //you may want to get the headline element out of the document
            head= document.getElementById("headline");

            // (1) create new properties to store alternate values
            //for each of the h1 properties changed in the stylesheet
            head.style.color: #FF00CD;
            head.style.fontStyle: normal;
            head.style.fontWeight: normal;
            
            //you may want to get the paragraph element out of the document

            // (2) create new properties to store alternate values
            //for each of the p properties changed in the stylesheet          

            
            //end of the function
            return;
        }
        function themechange(){
            //you may want to get the headline element out of the document
           var headOrig=document.getElementById("headline");
            
            // (3) store each of the current values in a temporary variable
            var tempColor = headOrig.style.color;
            var tempStyle = headOrig.style.fontStyle;
            var tempWeight = headOrig.style.fontWeight;
            
            // (4) set the current style to the alternate style
            headOrig.style.color=head.style.color;
            headOrig.style.fontStyle=head.style.fontStyle;
            headOrig.style.fontWeight=head.style.fontWeight;
            
            // (5) set the alternate values to the values saved in the temporary variable
            head.style.color=tempColor;
            head.style.fontStyle=tempColor;
            head.style.fontWeight=tempColor;
            
            
            //you may want to get the paragraph element out of the document
            
            
            // (6) same as 3 only with the paragraph element

            // (7) same as 4 only with the paragraph element

            
            // (8) same as 5 only with the paragraph element
            
            //end of the function
            return;

        }
        window.onload=function(){theme2setup(); document.getElementById("themechange").onclick=themechange;};
    </script>
</head>
<body>
    <form action="." method="get">
        <input type="button" value="Change Theme" onClick="dolt()"/>
    </form>
    <h1 id="headline">The Amazing Theme Changing Website</h1>
    <p id="text">On the amazing theme changing website you can select from one of two themes
    to view the site in. These themes are named theme 1 and theme 2. Hope you enjoy
    both of the themes.</p>
</body>
</html>

javascript

1 Contributor
1 Reply
100 Views
1 Day Discussion Span
Latest Post 15 Years Ago Latest Post by redhotspike

Reply to this topic

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.

redhotspike 0 Newbie Poster · Answer 1 · 2009-04-23T22:37:22+00:00

Hey guys: I figured it out...feel free to use as long as ya give me credit :)

<?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">
<!--
Author: Megan MacDonald
Data Completed: April 23, 2009
Title: Theme Change of a Website
-->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Part I</title>
    <style type="text/css">
    .hdln{
        color:#3333FF;
        font-style:italic;
        font-weight:bolder;
    }
    .prgph{
        color:#76B200;
        font-variant:small-caps;
    }
    .hdln2{
        color:#FF6600;
        font-style:normal;
        font-weight: normal;
        font-variant: small-caps;
    }
    .prgph2{
        color:#2E0854;
        font-variant: normal;
        font-family: fantasy;
    }
    </style>
    <script type="text/javascript">
        var head;
        var par;
        function theme2setup(){
            //you may want to get the headline element out of the document
            head = document.getElementById("headline");

            // (1) create new properties to store alternate values
            //for each of the h1 properties changed in the stylesheet
            
            
            //you may want to get the paragraph element out of the document
            par = document.getElementById("text");
            // (2) create new properties to store alternate values
            //for each of the p properties changed in the stylesheet
            
            //end of the function
            return;
        }
        function themechange(){
            //you may want to get the headline element out of the document
            
            // (3) store each of the current values in a temporary variable
            // (4) set the current style to the alternate style
            // (5) set the alternate values to the values saved in the temporary variable
                
            if (head.className=="hdln")
            {
                head.className = "hdln2";
            }
            else if (head.className=="hdln2")
            {
                head.className = "hdln";
            }
            
            //you may want to get the paragraph element out of the document
            
            
            // (6) same as 3 only with the paragraph element
            // (7) same as 4 only with the paragraph element
            // (8) same as 5 only with the paragraph element
            
            if (par.className=="prgph")
            {
                par.className = "prgph2";
            }
            else if (par.className=="prgph2")
            {
                par.className = "prgph";
            }
            
            //end of the function
            return;

        }
        window.onload=function(){theme2setup(); document.getElementById("themechange").onclick="themechange();"};
    </script>
</head>
<body>
    <form action="." method="get">
        <input type="button" value="Change Theme" onclick="themechange();" />
    </form>
    <h1 id="headline" class="hdln">The Amazing Theme Changing Website</h1>
    <p id="text" class="prgph">On the amazing theme changing website you can select from one of two themes
    to view the site in. These themes are named theme 1 and theme 2. Hope you enjoy
    both of the themes.</p>
</body>
</html>