Question

我尝试使用Cookie来保存用户选择的颜色，以设置我网站的正文页面。现在cookie设置正常，但由于某种原因，我似乎让它工作。谁能看到我在这里出错的地方？

感谢。

控制台错误：

未捕获的TypeError：无法设置属性＆＃39; className＆＃39;为null

＆＃13;

function getCookie(cname) {
  var name = cname + "=";
  var decodedCookie = decodeURIComponent(document.cookie);
  var ca = decodedCookie.split(';');
  for (var i = 0; i < ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}
var bgColour = getCookie('bgColour');

if (bgColour == "01") {
  document.getElementById("body").className = "bgColor01";
}
if (bgColour == "02") {
  document.getElementById("body").className = "bgColor02";
}
if (bgColour == "03") {
  document.getElementById("body").className = "bgColor03";
}
if (bgColour == "04") {
  document.getElementById("body").className = "bgColor04";
}
if (bgColour == "05") {
  document.getElementById("body").className = "bgColor05";
}

function color1() {
  document.cookie = "bgColour=01";
}

function color2() {
  document.cookie = "bgColour=02";
}

function color3() {
  document.cookie = "bgColour=03";
}

function color4() {
  document.cookie = "bgColour=04";
}

function color5() {
  document.cookie = "bgColour=05";
}

＆＃13;

body {
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.bgColor00 {
  background-color: #f6f4fb;
}

.bgColor01 {
  background-color: #80b3ff;
}

.bgColor02 {
  background-color: #afe9af;
}

.bgColor03 {
  background-color: #ffb380;
}

.bgColor04 {
  background-color: #ffaaaa;
}

.bgColor05 {
  background-color: #eeaaff;
}

＆＃13;

<html>

<body id="body">
  <button onClick="color1()">Blue</button>
  <button onClick="color2()">Green</button>
  <button onClick="color3()">Orange</button>
  <button onClick="color4()">Red</button>
  <button onClick="color5()">Purple</button>
</body>

</html>

＆＃13;

Answer 1

我认为您的问题是您将脚本放在<html>标记之外。我试过这样做：

<html>
<style>
body {
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.bgColor00 {
  background-color: #f6f4fb;
}

.bgColor01 {
  background-color: #80b3ff;
}

.bgColor02 {
  background-color: #afe9af;
}

.bgColor03 {
  background-color: #ffb380;
}

.bgColor04 {
  background-color: #ffaaaa;
}

.bgColor05 {
  background-color: #eeaaff;
}
</style>
<body id="body">
  <button onClick="color1()">Blue</button>
  <button onClick="color2()">Green</button>
  <button onClick="color3()">Orange</button>
  <button onClick="color4()">Red</button>
  <button onClick="color5()">Purple</button>
</body>

<script type='text/javascript'>

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

if (bgColour == "01") {
  document.getElementById("body").className = "bgColor01";
}
if (bgColour == "02") {
  document.getElementById("body").className = "bgColor02";
}
if (bgColour == "03") {
  document.getElementById("body").className = "bgColor03";
}
if (bgColour == "04") {
  document.getElementById("body").className = "bgColor04";
}
if (bgColour == "05") {
  document.getElementById("body").className = "bgColor05";
}

function color1() {
  document.cookie = "bgColour=01";
}

function color2() {
  document.cookie = "bgColour=02";
}

function color3() {
  document.cookie = "bgColour=03";
}

function color4() {
  document.cookie = "bgColour=04";
}

function color5() {
  document.cookie = "bgColour=05";
}
</script>
</html>

它的工作原理（没有错误发生），唯一的问题是不是动态的更改，你必须刷新页面。也许location.reload会对你有用，或者你需要调用：

document.getElementById("body").className = "bgColor0X";

在每个colorX()函数中。然后，颜色将在点击时刻发生变化，而不仅仅是重新加载。

我做了这个工作示例：https://codepen.io/jpaulet/pen/LLVjGO 希望它有所帮助！

Javascript Cookie无效

1 个答案: