Jump to content
Please Use CODE Tags

Specific JavaScript function to swap CSS style sheets with drop down menu

Travercraig
 Share
Posted

Basically I'm having difficulty following the provided instructions to make my style sheets swap on command. It's important that i use the JavaScript provided to pass my assignment.

The instructions are as follows:

 

The function setStyleSource( ) takes two arguments, a string that is the value of the id attribute of the link element you want to change, and a string that is the filename, or path plus filename, or URL of the CSS file you want to load. To make a click on an element load this stylesheet and discard the previous stylesheet, make a call to it the value of the element’s onclick event attribute

  

<p class="stylechange" onclick="setStyleSource(‘changeable’, ‘alt2.css’)"> … </p>

Here is the provided JavaScript code:

  

function setStyleSource (linkID, sourceLoc) {
            var theLink = document.getElementById(linkID);
            theLink.href = sourceLoc;
        }

And here are segments of my code both the css pages with different ID attributes and my attempt at creating a p element the same as the instructions, only with my ID and css link attributes:

  

<head>      
        <title>CRAFT412 - Home</title>      
        <link href="css/styles1.css" rel="stylesheet" type="text/css" title="1" id="1"/>    
        <link href="css/styles2.css" rel="stylesheet" type="text/css" title="2" id="2"/>
        <link href="css/styles3.css" rel="stylesheet" type="text/css" title="3" id="3"/>        
        <script type="text/javascript" src="CTEC1800-Stylesheets.js"> </script>         
    </head>
<p onclick="setStyleSource('2', 'styles2.css')">style 2</p>

I'd like this to work on a drop down menu so you can select which style sheet you want to change too on the drop down, but I'm not sure how to implement this with the JavaScript provided, I'm clearly doing something wrong and just need some help with these instructions.

 

Any help would be greatly appreciated.

   
   
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing Programming

×