Using a button to iterate through multiple options/values

I’m trying to program a button on my page to flip back and forth between two stylesheet for my page. So far I can get the button to change from stylesheet1.css to stylesheet2.css, but I haven’t figured out how to get it to be able to switch back. I have tried assigning the href attribute to a variable and then using conditional statement to check if its the first value then assign it the second value, else assign it the first value, but that still only goes one way. Any help is appreciated.

My Html====
<html>
<head>
<link id=“stylesheet” rel=“stylesheet” type=“text/css” href=“stylesheet1.css”/>
<link id=“stylesheet” rel=“stylesheet” type=“text/css” href=“stylesheet2.css”/>
<script type=“text/javascript” src=“javascript.js”></script>
<title>JavaScript Testing Grounds</title>
</head>

<input type=“submit” id="toggler value=“change-styles”>

</html>

==== javascript.js ============

var CssToggler =
{
init: function() //function wrapped in this to prevent from running until html loaded
{
var toggle = document.getElementById(“toggler”);

toggle.addEventListener("click", CssToggler.clickListener, false);

},
clickListener:function()

{
var stylesheet = document.getElementById(“stylesheet”);
stylesheet.setAttribute(“href”, “style3.css”);
}

}

Core.start(CssToggler); // a library method that starts the function once html is loaded.

The first thing I notice in your code is that you have two elements with the same id. This is no good, it goes against standards and it makes it hard to achieve your goal. HTML element ids should always be unique.

My suggestion is to disable one of the stylesheets each time the button is clicked, using something like the code below (note that you will need different ids for each style tag for this to work).

The key is the ‘disable’ property of the stylesheet tags.

document.getElementById(“stylesheet1”).disabled = true; // to disable stylesheet1
document.getElementById(“stylesheet2”).disabled = false; // to enable stylesheet2

An even better method is actually to toggle the disabled state with

var sheet1 = document.getElementById(“stylesheet1”);
var sheet2 = document.getElementById(“stylesheet2”);
// next two lines run in the function for the button click event
sheet1.disabled = !sheet1.disabled;
sheet2.disabled = !sheet2.disabled;

If this isn’t clear let me know and I can repost the sample from your original example with the necessary modification.

Hello sir,

I had not of anything like that, but I’m still a little unclear as to how and where to put everything so that it all works. I appreciate your help, a little further clarification would be greatly appreciated;-)

See the inline changes in bold below - unfortunately without access to the framework you are using to initialise I can’t test it but I’m fairly sure this should work for you. Hopefully this clarifies what is required. If not, please feel free to ask any other questions you may have.

My Html====
<html>
<head>
<link id=“stylesheet1” rel=“stylesheet” type=“text/css” href=“stylesheet1.css”/>
<link id=“stylesheet2” rel=“stylesheet” type=“text/css” href=“stylesheet2.css”/>
<script type=“text/javascript” src=“javascript.js”></script>
<title>JavaScript Testing Grounds</title>
</head>

<!-- I changed submit to button, but submit should still work –>
<button id=“toggler”>Change styles</button>

</html>

==== javascript.js ============

var CssToggler =
{
init: function() //function wrapped in this to prevent from running until html loaded
{
var toggle = document.getElementById(“toggler”);

toggle.addEventListener("click", CssToggler.clickListener, false);

},
clickListener:function()

{
var stylesheet1 = document.getElementById(“stylesheet1”);
var stylesheet2 = document.getElementById(“stylesheet2”);
stylesheet1.disabled = !stylesheet1.disabled;
stylesheet2.disabled = !stylesheet2.disabled;
}

}

Core.start(CssToggler); // a library method that starts the function once html is loaded.

Thanks for your response. Well it seems I am one step closer, but something still seems to be missing. With this code, when I first load the page, it is on stylesheet2, because that is the last one to be loaded in the head of the html page. When I click the button, it disables both stylesheets, and when I click the button again, it turns stylesheet2 on again. So i’m getting the toggling action I want, but how is it supposed to load the other one rather than disabling both?

Ah, I see. Only one of the stylesheets should be enabled when the page loads. To achieve this, disable all stylesheets except the first one (ie disable the second stylesheet). To do this, add a disabled property to stylesheet2 in your html as shown below.

<link id=“stylesheet2” rel=“stylesheet” type=“text/css” href=“stylesheet2.css” disabled />

That works exactly like I need it to! Many thanks for your help. I still don’t totally understand how this works, but I will keep working to wrap my head around this.

-Josh