CODEWITHSUNDEEP
javascriptcsshtml
user3388773
user3388773

Reputation: 19

Why does this not work (HTML, CSS and Javascript

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.

Upvotes: 0

Views: 477

Answers (2)

Janak
Janak

Reputation: 5052

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

Upvotes: 0

Amit Joki
Amit Joki

Reputation: 59232

In javascript, you have to use ' or ".

Your quote ‘ and ’ isn't valid.

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

Upvotes: 10

Related Questions