forms - JavaScript stylesheet switcher not working? -

so i'm trying have stylesheet switcher option on page, user can click radio button , changes stylesheet being applied, it's not working me.

here's what's in head tag:

<link href="stylesheet.css" type="text/css" rel="stylesheet" title="main"> <link href="stylesheet2.css" type="text/css" rel="alternate stylesheet" title="alt1"> <link href="stylesheet3.css" type="text/css" rel="alternate stylesheet" title="alt2"> <script language="javascript">  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;     }   }  } </script> 

and here's actual radio form:

<p><input type="radio" name="look" onclick="setactivestylesheet('main')" checked> light & dark blue</p> <p><input type="radio" name="look" onclick="setactivestylesheet('alt1')"> black & white</p> <p><input type="radio" name="look" onclick="setactivestylesheet('alt2')">yellow & red</p> 

anyone mind telling me i'm doing wrong? thank you!

variable a array of elements, should access elemnts index (ie. a[i]) , not directly.also, loop condition should i < a.length.

function setactivestylesheet(title) {  var i, a, main; = document.getelementsbytagname("link");  for(i=0; i< a.length ; i++) {  if(a[i].getattribute("rel").indexof("style") != -1     && a[i].getattribute("title")) {    a[i].disabled = true;    if(a[i].getattribute("title") == title) a[i].disabled = false;     }   }  }