Why does this not work (HTML, CSS and Javascript

Question

I'm having trouble with some code not working, and I'm not sure why. (I am a 1st year Computer Science student as don't know much about this)

<head>
<link rel="stylesheet" type="text/css" href="Task1.css" title="Normal">
<link rel="alternate stylesheet" type="text/css" href="Task1BaW.css" title="Other">         
<script type="text/javascript" src="/scripts/styleswitcher.js">
</script>
</head>

<body>  
 <div id="header">    <!-- header -->
     <button onclick="setActiveStyleSheet('Normal')">Change style to default</button>
     <button onclick="setActiveStyleSheet('Other')">Change style to Easy view</button>                                   
 </div>    <!-- end of header-->

Basically I want it to switch to the "Normal" Css when the 1st button is pressed, and switch to the "Other" Css when the 2nd button is pressed.

Thanks.

NB: I've changed the ‘’ to '(thanks for pointing that out, that was a stupid mistake) and not getting any errors that I'm aware of. Still doesn't seem to be working yet. I'm writing this is PSPad, if that helps at all. And trying it in the IE that PSPad opens and Chrome.

Also, changing the CSS should change the background and text size.

styleswitcher.js code:

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);

If anyone has a simpler way of doing this instead of fixing this, and can explain it to me so I can understand why it works, I'd appreciate it too.

For future reference: Include whatever error messages you get in your question along with the intended and observed behavior. — Matt Burland
– Matt Burland, Commented Apr 3, 2014 at 13:03
It's also better to use $("button").click(function(){}); instead of onclick= argument. — Michał
– Michał, Commented Apr 3, 2014 at 13:04
And perhaps even better to do $("button").on("click",function(){}); except he also does not load jQuery — mplungjan
– mplungjan, Commented Apr 3, 2014 at 13:04

Amit Joki · Accepted Answer · 2014-04-03 13:01:49Z

10

In javascript, you have to use ' or ".

Your quote ‘ and ’ isn't valid.

Since you did that, even StackOverflow's syntax highlighting failed!!

answered Apr 3, 2014 at 13:01

Amit Joki

59.4k7 gold badges80 silver badges97 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3388773 Over a year ago

Thanks. Doesn't seem to have corrected the problem, but that was a mistake that I should have seen >.<

Janak · Accepted Answer · 2014-04-03 13:03:04Z

0

Try using this :

<div id="header">    <!-- header -->
     <button onclick="setActiveStyleSheet('Normal')">Change style to default</button>
     <button onclick="setActiveStyleSheet('Other')">Change style to Easy view</button>                                   
</div>    <!-- end of header-->

answered Apr 3, 2014 at 13:03

Janak

5,0724 gold badges29 silver badges47 bronze badges

1 Comment

user3388773 Over a year ago

Thanks, though not fixed the code, I appreciate the correction.

Collectives™ on Stack Overflow

Why does this not work (HTML, CSS and Javascript

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related