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

Question

I understand that this type of question has been answered before, however I have to use some provided JavaScript to pass an assignment for my class, (It's very important that I use the provided JavaScript) and I'm having difficulty following the provided instructions to make my style sheets swap on command.

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 ap element the same as the instructions, only with my ID and css link attributes:

<head>      
        <title>CRAFT412 - Info</title>      
        <link href="css/styles1.css" rel="stylesheet" type="text/css" title="s1" id="s1"/>  
        <link href="css/styles2.css" rel="stylesheet" type="text/css" title="s2" id="s2"/>
        <link href="css/styles3.css" rel="stylesheet" type="text/css" title="s3" id="s3"/>      
        <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.

Answer 1

Have a look at this - I've commented it up too

Here's a fiddle to play with

<link href="style1.css" rel="stylesheet" type="text/css" title="s1" id="s1"/>
<select id="mySelect">
  <option value="style1.css">Style1.css</option>
  <option value="style2.css">Style2.css</option>
  <option value="style3.css">Style3.css</option>
</select>

/* the function which changes the src */
function setStyleSource (linkID, sourceLoc) {
  var theLink = document.getElementById(linkID);
  theLink.href = sourceLoc;
  console.log(theLink.href); //* console log to make sure */
}

/* this is a listener to listen for changes on the dropdown */
document.getElementById("mySelect").addEventListener("change", function(){
    var selected = this.options[this.selectedIndex].value; /* the option chosen */
    setStyleSource ("s1", selected)
});

You could also use the onchange property of the select:

This is without the listener being needed, all you need is:

<select id="mySelect" onchange="setStyleSource ('s1', this.options[this.selectedIndex].value)">
  <option value="style1.css">Style1.css</option>
  <option value="style2.css">Style2.css</option>
  <option value="style3.css">Style3.css</option>
</select>

/* the function which changes the src */
function setStyleSource (linkID, sourceLoc) {
  var theLink = document.getElementById(linkID);
  theLink.href = sourceLoc;
}

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

Question

1 answers

solution1
0 2016-04-23 14:45:59

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

Question

1 answers

solution1 0 2016-04-23 14:45:59

solution1
0 2016-04-23 14:45:59