Changing external css referencee using JavaScript

Example 1

I have a html page that references 2 external style sheets. These are the 2 style sheets.

StyleSheet1.css

body {
    background-color: #0094ff;
}

Open in new window


StyleShee2.css

body {
    background-color: #ff00dc;
}

Open in new window


My html page just has 2 hypelinks.
If I click Style 1 then style 1 is applied to my page.
If I click Style 2 then style 2 is applied to my page.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Changing externa css referencee using JavaScript</title>

    <link rel="stylesheet" type="text/css" href=""/>
    <script type="text/javascript">
        function changeCSS(cssFile, cssLinkIndex) {

            var oldlink = document.getElementsByTagName("link").item(cssLinkIndex);

            var newlink = document.createElement("link")
            newlink.setAttribute("rel", "stylesheet");
            newlink.setAttribute("type", "text/css");
            newlink.setAttribute("href", cssFile);

            document.getElementsByTagName("head").item(0).replaceChild(newlink, oldlink);
        }
    </script>
    
</head>
<body>

    <div class="box">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
    <a href="#" onclick="changeCSS('Content/StyleSheet1.css', 0);">STYLE 1</a> 
    <a href="#" onclick="changeCSS('Content/StyleSheet2.css', 0);">STYLE 2</a>

</body>
</html>

Open in new window


This page works fine.

Example 2

For Example 2, now I'm trying to do the same example but this time instead of having hyperlinks.
I want to use an html drop down list like shown in this example.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Changing externa css referencee using JavaScript</title>

    <link rel="stylesheet" type="text/css" href=""/>
    <script type="text/javascript">
        function changeCSS(cssFile, cssLinkIndex) {

            var oldlink = document.getElementsByTagName("link").item(cssLinkIndex);

            var newlink = document.createElement("link")
            newlink.setAttribute("rel", "stylesheet");
            newlink.setAttribute("type", "text/css");
            newlink.setAttribute("href", cssFile);

            document.getElementsByTagName("head").item(0).replaceChild(newlink, oldlink);
        }
    </script>
    
</head>
<body>



    <div class="box">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
    <a href="#" onclick="changeCSS('StyleSheet1.css', 0);">STYLE 1</a> 
    <a href="#" onclick="changeCSS('StyleSheet2.css', 0);">STYLE 2</a>



    <select id="DDLStyles" name="DDLStyles"  onchange="changeCSS();">
             <option value="StyleSheet1.css">STYLE 1</option>
             <option value="StyleSheet2.css">STYLE 2</option>
    </select>

</body>
</html>

Open in new window


I'm not sure how to set the onchange event  of my selected value and then apply it in the javascript function so that the style sheet I selected is applied to the page.

Example 2 should work just like Example 1.

Anyone know what I'm doing wrong in example 2 so my dropdownlist changes the style of my page?
LVL 1
maqskywalkerAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

COBOLdinosaurCommented:
you just need to reference the value of the option by doing the onvchange this way:

onchange="changeCSS(this.options[this.selectedIndex].value);"

Cd&

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
maqskywalkerAuthor Commented:
I changed it to this, but still doesn't work.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Changing externa css referencee using JavaScript</title>

    <link rel="stylesheet" type="text/css" href="#"/>
    <script type="text/javascript">
        function changeCSS(cssFile, cssLinkIndex) {

            var oldlink = document.getElementsByTagName("link").item(cssLinkIndex);

            var newlink = document.createElement("link")
            newlink.setAttribute("rel", "stylesheet");
            newlink.setAttribute("type", "text/css");
            newlink.setAttribute("href", cssFile);

            document.getElementsByTagName("head").item(0).replaceChild(newlink, oldlink);
        }

    </script>
    
</head>
<body>

    <div class="box">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>

<!--    <a href="#" onclick="changeCSS('StyleSheet1.css', 0);">STYLE 1</a> 
    <a href="#" onclick="changeCSS('StyleSheet2.css', 0);">STYLE 2</a>-->


    <br /><br /><br /><br />

    <select id="DDLStyles" name="DDLStyles"  onchange="changeCSS(this.options[this.selectedIndex].value, 0);">
             <option value="StyleSheet1.css">STYLE 1</option>
             <option value="StyleSheet2.css">STYLE 2</option>
    </select>

</body>
</html>

Open in new window

It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.