CODEWITHSUNDEEP
javascript
Benji
Benji

Reputation: 635

Calling functions correctly in premade javascript

I got this HTML code:

<head>
<link href="default.css" title="default" rel="stylesheet" type="text/css" />
<link href="theme1.css" title="theme1" rel="stylesheet" type="text/css" />
<link href="theme2.css" title="theme2" rel="stylesheet" type="text/css" />
<link href="theme3.css" title="theme3" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="javascript.js"></script>
</head>

<body>

<ul id="dropdown">
  <li> Choose theme
    <ul> 
      <li id="stylesheet1" > <a href="#"> Default </a></li>
      <li id="stylesheet2" > <a href="#"> Theme 1 </a></li>
      <li id="stylesheet3" > <a href="#"> Theme 2 </a></li>
      <li id="stylesheet4" > <a href="#"> Theme 3 </a></li>
   </ul>
 </li> 
</ul>

</body>

And I got this is the code in the separate file javascript.js:

function setActiveStyleSheet(title) {
  var i, a, main;
  for(i=0; (a = document.getElementsByTagName("link")[i]); 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]); 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]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1
       && a.getAttribute("rel").indexOf("alt") == -1
       && a.getAttribute("title")
       ) return a.getAttribute("title");
  }
  return null;
}

function createCookie(name,value,days) {
  if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
  }
  else expires = "";
  document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}

window.onload = function(e) {
  var cookie = readCookie("style");
  var title = cookie ? cookie : getPreferredStyleSheet();
  setActiveStyleSheet(title);
}

window.onunload = function(e) {
  var title = getActiveStyleSheet();
  createCookie("style", title, 365);
}

var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);



// Last part

function initate()
{
var style1 = document.getElementById("stylesheet1");
var style2 = document.getElementById("stylesheet2");
var style3 = document.getElementById("stylesheet3");
var style4 = document.getElementById("stylesheet4");

style1.onclick = function () { 
    setActiveStyleSheet("default"); 
    return false;
    };
style2.onclick = function () { 
    setActiveStyleSheet("theme1"); 
    return false;
    };
style3.onclick = function () { 
    setActiveStyleSheet("theme2");
    return false
    };
style4.onclick = function () { 
    setActiveStyleSheet("theme3"); 
    return false
    };            
}

window.onload = initate;

I'm new to javascripts and I haven't written this script myself (http://www.alistapart.com/articles/alternate/) and I managed to create the last part (as shown by comment in code) by myself to have the eventhandlers separate in the javascript file as I want and this part enables the style sheets to be changed the way I want it. But I can't figure out how to get the cookies to work as well to get the themes I'm using to be saved.

EDIT:

Since I'm new I still have a hard time figuring this code out but I've tried changing the last function initiate and used onClick eventhandlers for the saving of cookies but I can't get it to work. I've used this:

style1.onclick = function () {
    createcookie(T1, style, 7);
}

And 

document.getElementById("stylesheet1").onclick(createCookie(T1, style, 7));

And when I did the changing of style sheets didn't work anymore.

Upvotes: 0

Views: 179

Answers (1)

gustaf r
gustaf r

Reputation: 1234

This works:

style1.onclick = function () {
    createcookie(T1, style, 7);
}

because what you do is you set the onclick handler to a function. You don't call the function there, you just give it away so that someone else (the browser) can call it.

This doesn't work:

document.getElementById("stylesheet1").onclick(createCookie(T1, style, 7));

because you call the function right there. What you do is:

  1. Invoke createCookie with 3 parameters
  2. Invoke onclick with the return value from createCookie

What you want is probably something like:

document.getElementById("stylesheet1").onclick = function() {
    createCookie(T1, style, 7);
};

what this does, is create an anonymous function and sets this function to the onclick property of the element. This anonymous function, when called, will call the createCookie function.

The reason you need to do this, is because you have parameters to createCookie, and those parameters must be bound somewhere until it's time to call the function.

Upvotes: 1

Related Questions