SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2011
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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.

  2. #2
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2011
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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;-)



    Quote Originally Posted by ianc.sp View Post
    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.

  4. #4
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  5. #5
    SitePoint Enthusiast
    Join Date
    Mar 2011
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  6. #6
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by josh mcq View Post
    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 />

  7. #7
    SitePoint Enthusiast
    Join Date
    Mar 2011
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    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

    Quote Originally Posted by ianc.sp View Post
    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 />


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •