# ALA's Style Switcher - dynamically create lists?

**URL:** <https://forum.kirupa.com/t/alas-style-switcher-dynamically-create-lists/197606>\
**Category:** web dev\
**Created:** [August 17, 2006, 5:37pm UTC](https://forum.kirupa.com/t/alas-style-switcher-dynamically-create-lists/197606 "2006-08-17T17:37:30Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![takethetrain](https://avatars.discourse-cdn.com/v4/letter/t/ba8739/32.png) [@takethetrain](https://forum.kirupa.com/u/takethetrain)\
**Post date:** [August 17, 2006, 5:37pm UTC](https://forum.kirupa.com/t/alas-style-switcher-dynamically-create-lists/197606/1 "2006-08-17T17:37:30Z")

</div>

I’m using ALA’s Alternative Style: Working With Alternate Style Sheets code to switch between my alternate stylesheets. With the JavaScript code in place, you would normally switch a stylesheet by clicking on a link, but I would like to place them dynamically so I don’t have to list each one.  
[whisper](Note: I am omitting the part involving cookies because I won’t need them later on–this is irrelevent, though.)[/whisper]

Normally, to change a stylesheet, you’d just have a link on a page accessing the javascript functions, like this:

```auto

<a href="#" onclick="setActiveStyleSheet('default'); return false;">change style to default</a>

```

Here is the JavaScript code I’m using:

```auto

function setActiveStyleSheet(title) {
    var i, a, main;
    for(i=0; (a = document.getElementsByTagName("link")*); i++) {
        if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
            a.disabled = true;
            if(a.getAttribute("title") == title) a.disabled = false;
        }
    }
}
function getActiveStyleSheet() {
    var i, a;
    for(i=0; (a = document.getElementsByTagName("link")*); i++) {
        if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled)
            return a.getAttribute("title");
    }
    return null;
}
function getPreferredStyleSheet() {
    var i, a;
    for(i=0; (a = document.getElementsByTagName("link")*); i++) {
        if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("rel").indexOf("alt") == -1 && a.getAttribute("title"))
            return a.getAttribute("title");
    }
    return null;
}
window.onload = function(e) {
    var title = getPreferredStyleSheet();
    setActiveStyleSheet(title);
}

```

How do I alter this code to create my links dynamically?