Jump to content
Larry Ullman's Book Forums

Question About Target.Id With The Theme Changing Script.


Recommended Posts

Okay, I have the code working but I don't under stand it at all.

 

Here is what I am having a problem with. I understand the setTheme function. What starts confusing me is on the window.onload. It calls the setThemeCookie function but what goes in the e variable in the function?

 

Also it says "Close your browser window, or even quit the browser, and then reopen the

page to see your theme selection retained." When I close the browser or reopen the page or refresh it, it always goes back to the blank theme.

 

function setTheme(theme) {
'use strict';
var css = null;
if (document.getElementById('cssTheme')) {
css = document.getElementById('cssTheme');
css.href = 'css/' + theme + '.css'
} else {
css = document.createElement('link');
css.rel = 'stylesheet';
css.href = 'css/' + theme + '.css';
css.id = 'cssTheme';
document.head.appendChild(css);
}
}

function setThemeCookie(e) {
'use strict';
e = e || window.event;
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;
}
var target = e.target || e.srcElement;

var expire = new Date();
expire.setDate(expire.getDate() + 7);
COOKIE.setCookie('theme', target.id, expire);
setTheme(target.id);
return false;
}
window.onload = function() {
'use strict';
document.getElementById('aTheme').onclick = setThemeCookie;
document.getElementById('bTheme').onclick = setThemeCookie;
var theme = COOKIE.getCookie('theme');
if (theme) {
setThemeCookie(theme);
}
};

 

HTML

 

<p>Choose a theme: <a href="somepage.php?theme=a" id="aTheme">A Theme</a> || <a href="somepage.php?theme=b" id="bTheme">B Theme</a></p>

Link to comment
Share on other sites

If the previous theme does not show after shutting down the browser then the code is not working (he said with a friendly smile).

 

The e variable in the function setThemeCookie(e) is the event object (see Chapter 8 Advanced Event Handling). It's value happens when one of the event listeners in the window.onload anonymous function is triggered (clicking on the link).

document.getElementById('aThemeId').onclick = setThemeCookie;

 

From the event object we use the preventDefault() method to keep from following the href URL, the .target property to know which link was clicked and .id property to get the actual element id attribute from the HTML.

 

Regarding not showing the correct theme after shutdown nothing pops out in your code as bad (you are missing the semi-colon on line 6 - which doesn't matter on my chrome or firefox browsers).

 

It does sound like something is wrong in either storing your cookie or retrieving it. You don't show your COOKIE code - I would check that out and run through firebug if you can and it should be pretty easy to find the flaw. Do you have any console errors?

 

Hope that helps a little - Dave

  • Upvote 2
Link to comment
Share on other sites

The console error in mine and Larry's code is

 

 

TypeError: target is undefined

COOKIE.setCookie('theme', target.id, expire);

 

Here is my cookie code

 

var COOKIE = {
setCookie: function(name, value, expire) {
 'use strict';
 var str = encodeURIComponent(name) + '=' + encodeURIComponent(value);
 str += ';expires=' + expire.toGMTString();
 document.cookie = str;
},
getCookie: function(name) {
 'use strict';
 var len = name.length;
 var cookies = document.cookie.split(';');
 for (var i = 0, count = cookies.length; i < count; i++) {
  var value = (cookies[i].slice(0,1) == ' ') ? cookies[i].slice(1) : cookies[i];
  value = decodeURIComponent(value);
  if (value.slice(0,len) == name) {
   return cookies[i].split('=')[1];
  }
 }
 return false;
}
};

Link to comment
Share on other sites

I think the error is the last line of code in the window.onload anonymous function.

var themeSet = COOKIE.getCookie('theme'); // theme is our cookie's literal name
if (themeSet) {
setTheme(themeSet) // Set Theme when cookie exists
};

 

The function to call is setTheme() not setThemeCookie().

 

You just retrieved the cookie so it doesn't make sense to reset the cookie. We want to set the theme based on the cookie value.

Link to comment
Share on other sites

 Share

×
×
  • Create New...