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.